selectedDraggable画像プレビュー

Question

私は画像のプレビューでchooseDraggableをやりたいのですが、画像をプレビューするには "selectedDraggable"を選択して、すべての画像を消去せずに選択した画像を削除することができますプレビューコンテナにあります。私のコードは、私は、画像を削除するには、[X]をクリックすることはできません動作していない何らかの理由でこのコード$(this).parent()は#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(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(); 
 
});

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

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

あなたに感謝助けてくださいbodyになると、これは空白になります。あなたが#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>