在draggable jquery

Question

是否有可能在上传到可拖动的可拖动内容之前预览图像？我有一些代码，但我不能让它工作。我可以键入文本并将其插入容器中，但是当我尝试预览图像时，我无法单独查看图像，我必须在预览图像之前键入文本。我希望能够在任何给定类型下预览尽可能多的图像，而无需事先输入任何文本。如果您需要进一步说明，请随时向您表示感谢。

这是上传文字和图片的html

<p align="center"><textarea data-bind="value: textContent" Placeholder="Type text to append" rows="4" cols="21"></textarea>&nbsp;&nbsp;&nbsp;
    <button data-bind="click: addNew">Create</button></p>


    <p align="center"><input type="file" id="files" name="file" multiple />

这是我的html，显示文本和图像

 <div id="box" class="container">

<div data-bind="foreach:items" class="fix_backround">

<div href="#" class="item" data-bind="draggable:true,droppable:true">

    <b><font face="Arial Black" color="red"><span data-bind="click:$parent.remove" style="font-size:12pt;">X</span></font></b><br/><br/>

    <center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center>

    

这是显示图像的地方

<output id="list"></output>

这是我的图片脚本

 function handleFileSelect(evt) {
var files = evt.target.files;

// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {

  // Only process image files.
  if (!f.type.match('image.*')) {
    continue;
  }

  var reader = new FileReader();

  // Closure to capture the file information.
  reader.onload = (function(theFile) {
    return function(e) {
      // Render thumbnail.
      var span = document.createElement('span');
      span.innerHTML = 
      [
        '<img style="height: 150px; border: 1px solid #000; margin: 5px" src="', 
        e.target.result,
        '" title="', escape(theFile.name), 
        '"/>'
      ].join('');

      document.getElementById('list').insertBefore(span, null);
    };
  })(f);

  // Read in the image file as a data URL.
  reader.readAsDataURL(f);
}
  }

 document.getElementById('files').addEventListener('change', handleFileSelect, false);

这是我的可拖动脚本

 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());