selectedDraggable in image preview

Question

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

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


}
$('.remove-img').click(function (e) {
    $(this).parent().find('img').not(this).remove();
});

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

<script src="http://circletype.labwire.ca/js/circletype.js"></script><script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>

<div id="draggableHelper" style="display:inline-block">
  <input type="file" class="dimmy" id="image-input" multiple />
<span class="remove-img">[x]</span>  
 <span id="image" class="preview-area"style="height:100px; width:200px;" ></span>
</div>

＆＃13;

＆＃13;

＆＃13;

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 = $('<img src="' + objectUrl + '" />');
    $('<div class="preview-area"/>').append('<a class="remove-img"> &times; </a>').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;
}

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

<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>

<div id="draggableHelper" style="display:inline-block">
  <input type="file" class="dimmy" id="image-input" multiple />
  <span id="image" class="preview-area" style="height:100px; width:200px;"></span>
</div>