Предварительный просмотр загруженных изображений внутри draggable

Question

Я хотел бы знать, как я могу просматривать изображения внутри draggable, прежде чем загружать их. У меня есть код, который я хочу переписывать с предварительным просмотром изображений iside draggable

Это мой код для предварительного просмотра изображения внутри draggable. Я хочу иметь возможность разделить их и перетаскивать каждое изображение по отдельности.

var inputLocalFont = document.getElementById("image-input"); 
 
inputLocalFont.addEventListener("change", previewImages, false); 
 

 
function previewImages() { 
 
    var fileList = this.files; 
 

 
    var anyWindow = window.URL || window.webkitURL; 
 

 
    for (var i = 0; i < fileList.length; i++) { 
 
    var objectUrl = anyWindow.createObjectURL(fileList[i]); 
 
    $('.preview-area').append('<img src="' + objectUrl + '" />'); 
 
    window.URL.revokeObjectURL(fileList[i]); 
 
    } 
 

 

 
} 
 
$('#draggableHelper').draggable(); 
 
$('#image').resizable();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script> 
 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 
 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 

 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<div id="draggableHelper" style="display:inline-block"> 
 
    <input type="file" class="dimmy" id="image-input" multiple /> 
 
    <div id="image" class="preview-area"></div> 
 

 
</div>

Это мой код, который я уже для вставки текста в контейнере, я хотел бы совместить это и предварительный просмотр изображения. ниже сценарий отлично работает, я могу просматривать неограниченное текст и перетащить их по отдельности Пожалуйста, помогите мне спасибо

var z = 1; //value to make div overlappable 

$('#addText').click(function (e) { 
/** Make div draggable **/ 
$('<div />', { 
    class: 'ui-widget-content', 
    appendTo: '.container', 
    draggable: { 
     containment: 'parent', 
     start: function(event, ui) { 
      $(this).css('z-index', ++z); 
     } 
    } 
}); 
}); 


$(document).on("dblclick", '.text', function() 
{ 
$(this).hide(); $(this).closest('.item').find('.edit_text').val($(this).text()).show(); 
}); 

$(document).on("click", ".edit_text", function() 
{ 
return false; 
}); 


$(document).on("click", function() 
{ 
var editingText = $('.edit_text:visible'); 
if (editingText.length) 
{ 
    editingText.hide(); 
    editingText.closest('.item').find('.text').text($(editingText).val()).show(); 
} 
}); 


var count = 1; 
var selectedDraggable; 

ko.bindingHandlers.draggable={ 
init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
    $(element).draggable(); 
    $(element).addClass('item' + count); 
    count++; 
    $(element).on('click', function() { 
     selectedDraggable = $(this); 
    }) 
} 
}; 


var vm=function(){ 
var self=this; 
self.items=ko.observableArray(); 
self.textContent = ko.observable(''); 
self.init=function(){ 
    self.items([]); 
} 
self.remove=function(item){ 
    console.log(item); 
    self.items.remove(item); 
} 
self.addNew = function() { 
    self.items.push(self.textContent()); 
    self.textContent(''); 
} 
self.init(); 
} 

ko.applyBindings(new vm()); 

Answer 1

Пожалуйста, проверьте фрагмент кода:

var inputLocalFont = document.getElementById("image-input"); 
 
inputLocalFont.addEventListener("change", previewImages, false); 
 

 
function previewImages() { 
 
    var fileList = this.files; 
 

 
    var anyWindow = window.URL || window.webkitURL; 
 

 
    for (var i = 0; i < fileList.length; i++) { 
 
    var objectUrl = anyWindow.createObjectURL(fileList[i]); 
 
    var imgEl = $('<img src="' + objectUrl + '" />'); 
 
    $('<div class="preview-area"/>').append(imgEl).appendTo('body').draggable(); 
 
    imgEl.load(function() { 
 
     $(this).resizable(); 
 
    }); 
 
    window.URL.revokeObjectURL(fileList[i]); 
 
    } 
 

 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script> 
 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 
 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 

 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<div id="draggableHelper" style="display:inline-block"> 
 
    <input type="file" class="dimmy" id="image-input" multiple /> 
 
    <div id="image" class="preview-area"></div> 
 

 
</div>