在draggable中预览上传的图像

Question

我想知道如何在上传之前预览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

请查看代码段：

＆＃13;

＆＃13;

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]);
  }


}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;