selectedDraggable in image preview

我想知道如何在我的图像预览中选择可拖动我想要做的是将“selectedDraggable”介入到图像预览中，这样我就可以删除我选择的任何图像而不删除预览容器中的所有图像。 由于某种原因，我的代码无法正常工作我无法点击[X]删除图片请帮忙谢谢

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 = $(''); $('
').append(imgEl).appendTo('body').draggable(); imgEl.load(function() { $(this).resizable(); }); window.URL.revokeObjectURL(fileList[i]); } } $('.remove-img').click(function (e) { $(this).parent().find('img').not(this).remove(); }); 

          
  [x]   

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

Answer 1

此代码$(this).parent()将返回#draggableHelper ，但图像将附加到body ，这意味着$(this).parent().find('img')将为空。 要解决此问题，您可以将图像附加到#draggableHelper ：

 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 = $(''); $('
').append(' × ').append(imgEl).appendTo('body') .draggable(); //^ change to this imgEl.load(function() { $(this).resizable(); }); window.URL.revokeObjectURL(fileList[i]); } } $('body').on('click', '.remove-img', function(e) { e.stopPropagation(); var parent = $(this).parents('.preview-area'); parent.find('img').resizable('destroy'); parent.draggable('destroy').remove(); }); 

 .remove-img { position: relative; top: 0px; right: 0px; width: 25px; height: 25px; background-color: #f00; font-size: 22px; color: #fff; text-align: center; display: block; cursor: pointer; }