问题描述
我想知道如何在图像预览上执行selectedDraggable,我想将"selectedDraggable"转换为图像预览,这样我就可以删除选择的任何图像,而不会删除预览容器中的所有图像.由于某些原因,我的代码无法正常工作,我无法点击[X]删除图片,请帮助谢谢
I would like to know how I can do selectedDraggable on my image preview what I want to do is intergrade "selectedDraggable" to image preview so I can be able to delete any image I select without erasing all the images in preview container. for some reason my code is not working I cannot click [X] to delete the images please help thank you
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);
})
}
};
推荐答案
此代码$(this).parent()
将返回#draggableHelper
,但是图像会附加到body
,这意味着$(this).parent().find('img')
将为空.为了解决这个问题,您可以将图像附加到#draggableHelper
:
This code $(this).parent()
will return #draggableHelper
, but the images are appended to body
, this means $(this).parent().find('img')
will by empty. To solve that you can append your images to #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"> × </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>
这篇关于selected在图像预览中可拖动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!