jquery - 拖放加载内容 html 或加载 DIV

Question

如我附件所示，我需要，当我把1拖到0上，然后0会被数字1代替，加载内容区的内容文本，2 3 4一样，加载相应的内容，对不起我的英语不好

http://www.asciiflow.com/#Draw3932677476163280247/2136498171

我没有10个声望，我不能上传图片

Answer 1

您需要通过为它们提供属性 draggable="true"来使您想要拖动的东西可拖动。因此，那些包含数字的框 - 您要么想让整个框都具有 draggable=true，要么如果只是数字，则将其包裹在一个跨度中并使其可拖动。

一旦它们是可拖动的，你想像这样设置 dataTransfer 对象(假设除了被拖动的东西中的数字没有其他东西):

ondragstart = function(ev) {
    ev.dataTransfer.setData("text", ev.target.innerHTML);
}

对于可以放下的东西 - 你需要取消 dragover 事件来指示允许放下，关于这个已经写了很多，但本质上你想要这样的东西:

$(".dropTargets").bind("dragover", function(ev) {
    event.preventDefault(); // or something like that
});

最后得到drop事件:

$(".target").bind("drop", function(ev) {
    this.innerHTML = ev.originalEvent.dataTransfer.getData("text");
});

这是一个非常快速的示例，展示了它是如何工作的:http://jsfiddle.net/zcZE5/2/

这里有几个实现细节可以让你省点力气

a) 你需要调用 setData 否则 firefox 将不会启动拖动b) 您必须使用键“text”，否则 IE 会报错。