获得有关在可内容div中拖动图像的通知
获得有关在可内容div中拖动图像的通知
提问于 2015-07-27 16:23:53
我有一个div，它有contenteditable="true“，并且包含一些html。此html可能包括图像。
由于contenteditable=“真”，用户可以通过将图像拖到新位置来移动图像。但是，每次移动图像时，我都需要通知我的代码，这样我就可以得到要移动的图像元素和删除图像的目标节点。我该怎么做？
我的当前解决方案在div元素中添加了一个Drop侦听器，该元素是可满足的，然后每次用户移动图像时都会得到一个drop事件，但是我无法获得用户移动的图像的dom节点。
另外:拖动图像时，似乎复制了DOM节点，而不是移动它。这是真的吗？(在firefox中测试)。
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-08-14 10:23:18
我建议使用以下纯JavaScript解决方案
HTML：
<div id="space" contenteditable="true">
Hello <img width="300" class="contentImg" src='http://www.independent.co.uk/incoming/article9859555.ece/alternates/w620/Dr-Talyor.jpg'/> dude!
</div>CSS：
#space {
width: 500px;
height: 500px;
background-color: #000000;
color: #ffffff;
}JavaScript：
var draggedImg;
document.addEventListener("dragstart", function( event ) {
// IE uses srcElement, others use target
var targ = event.target ? event.target : event.srcElement;
if (targ.className == 'contentImg'){
draggedImg = event.target;
}
}, false);
document.addEventListener("dragend", function( event ) {
if(draggedImg){
alert("It's moved!");
console.log('Here is data', draggedImg);
draggedImg = null;
}
}, false);您将在draggedImg变量中找到一个图像节点。
请查看这里的一个工作示例：http://jsfiddle.net/o09hLtch/2/
Stack Overflow用户
发布于 2015-08-11 11:24:42
jQueryUI提供了拖曳和可下垂交互功能。Draggable有拖曳事件，它为您提供了拖放元素，droppable有跌落事件，它为您提供了删除的元素以及它被删除的位置。
快速示例：陈词滥调
$('#content .dr').draggable(
{
addClasses: false,
drag: function(event, ui)
{
$('#notify').text('Bird (#' + $(this).attr('id') + ') being dragged: ' + JSON.stringify(ui));
},
stop: function(event, ui)
{
$('#notify').text('');
}
});Stack Overflow用户
发布于 2015-08-11 12:06:47
我觉得你在找这个，
$(function () {
$(".image").draggable({helper: 'original'});
$(".container").droppable({
drop: function (event, ui) {
$(this).append(ui.draggable.css({position: 'static'}));
alert('dropped!');
}
});
});JSFiddle Demo 让我们看看
好运[‘]
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31658366
复制相关文章
相似问题
腾讯云开发者
