Question

我有一个令人满意的div =＆＃34; true＆＃34;其中包含一些HTML。这个HTML可能包含图像。

因为contenteditable =＆＃34; true＆＃34;用户可以通过将图像拖动到新位置来移动图像。但是我需要在每次移动图像时通知我的代码，以便我同时获取正在移动的图像元素和放置图像的目标节点。我该怎么做？

我当前的解决方案为我的div元素添加一个Drop侦听器，这是一个有意义的，然后每次用户移动图像时我都会得到一个drop事件，但是我无法获得带有图像的dom节点用户感动。

另外：拖动图像，似乎是复制DOM节点，而不是移动它。这是真的？（在Firefox中测试过）。

Answer 1

我建议使用以下纯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/

Answer 2

jQueryUI功能draggable和droppable互动。 Draggable有drag event，它为您提供拖动的元素，droppable为drop event，它为您提供了已删除的元素以及删除的元素。

简单示例：clickety

$('#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('');
    }
});

Answer 3

我认为你正在寻找这个，

$(function () {
 $(".image").draggable({helper: 'original'});
    $(".container").droppable({
      drop: function (event, ui) {
        $(this).append(ui.draggable.css({position: 'static'}));
        alert('dropped!');
    }
 });
});

对于JSFiddle演示Let's see

祝你好运[＆＃39;}

获取有关在可信任的div中拖动图像的通知

3 个答案: