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

Question

如我的附件所示，我需要，当我把1拖到0的时候，那么0会被数字1代替，并在内容区加载内容文本，2 3 4同理，加载对应的内容，不好意思我的英文不好

我没有 10 声望，我无法上传图片

score 0 · Accepted Answer

您需要通过赋予属性 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 会报错。

1 回答 1