Vorschau hochgeladen Bilder innerhalb draggable

Question

Ich würde gerne wissen, wie ich Bilder in draggable Vorschau, bevor ich sie hochladen kann. Ich habe etwas Code, den ich mit der Vorschau Bilder interplantieren möchte iside ziehbar

Dies ist mein Code für Vorschaubild in draggable Ich möchte in der Lage sein, sie zu trennen und jedes Bild einzeln ziehen.

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>

Dies ist mein Code, dass ich bereits für den Text in einem Container eingefügt ich diese und die Bildvorschau kombinieren möchte. das Skript unten funktioniert gut ich kann unbegrenzt Text-Vorschau und ziehen Sie sie einzeln Bitte helfen Sie mir danke

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

Bitte Bitte Code überprüfen:

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>