小编Woo*_*ody的帖子

这两个属性之间的关系似乎是一些混乱的根源.基于读取MDN站点和MSDN,我以为我已经弄明白了,但现在我不确定....

我认为当拖动一个元素时,你可以指定允许它发生的事情(即它可以移动,复制,链接到 - effectAllowed常量之一).这是effectAllowed属性.

不同的drop目标会做不同的事情,所以当你使用另一个元素时,它可以控制drop上发生的"效果",这就是"dropEffect"属性.所以我设置了一个简单的例子来测试这个理论.

的jsfiddle

$("[draggable='true']").on("dragstart", function(e) {
    var dt =  e.originalEvent.dataTransfer;
    dt.effectAllowed = "copyMove";
    dt.setData("text/plain", "Foo");
});

$("#dropZoneCopy").on("dragover", function(e) {
    var dt =  e.originalEvent.dataTransfer;
    dt.dropEffect = "copy";
    e.preventDefault();
});

$("#dropZoneMove").on("dragover", function(e) {
    var dt =  e.originalEvent.dataTransfer;
    dt.dropEffect = "move";
    e.preventDefault();
});

我有一个用户可以拖动的框 - 允许的效果是"copyMove".我有一个框设置dropEffect复制,一旦设置dropEffect移动.我期望的是,当用户拖过"复制框"时,光标将改变以指示将发生复制,因为当我拖动"移动框"时,光标变化以指示移动...

只有Chrome的行为符合我的预期.这是因为其他浏览器是错误的还是因为我不了解规范.好吗？

更新 来自摆弄这个的更多信息.

在Firefox和Chrome中,如果你有一个dragsource,表明effectAllowed是"copy",而dropzone就是dropEffect是"move",那么即使你取消了这个事件,你也不能放弃掉落区域.我认为dropEffect对于阅读ondrop看看该做什么很有用,但它在Chrome上不可用,dropEffect不会出现在drop handler上,例如尝试读取dataTransfer.dropEffect会说dropEffect是"没有"即使你把它放在dragover上.如上所述设置dropEffect确实会影响光标的显示方式.

在Firefox中,dropEffect来确实在悬浮窗来通过上的dragover被设置之后,但它并不会影响鼠标光标的显示.在Firefox窗口上按ctrl键确实会影响鼠标的显示,但不会影响dropEffect属性.

规范显示源可以监听dragend事件以查看发生的情况.它应该查看此事件中的dropEffect.Chrome,Mozilla和Safari正如您所希望的那样工作,dragend效果出现在dragend事件中.在IE中,如果允许的效果是一个简单的值,例如"复制",则任何成功的下降都会导致此值显示为drand上的dropEffect.如果effectAllowed是一个像copyMove这样的复合值,并且你试图通过设置dropEffect选择"移动"dragover,那么你运气不好,那将在dragend上的源码中作为dropEffect ="none"来实现.如果该效果是一个简单的值,那么你会遇到一个游标和一个dropEffect,这就是在dragstart上设置的effectAllowed.有趣的是,当你从IE11至少拖入一个本机应用程序(我之前假设)时,它似乎确实会出现dropEffect.

其他说明

在Mac上的Safari上 - 无法以编程方式设置effectAllowed,因此任何设置的dropEffect都是有效的.当您按下cmd键时,effectAllowed变为"move",当您按下alt键时,effectAllowed变为"copy".此后它可以正常工作,如果dropEffect不是这些effectAlloweds中的一个,则浏览器不允许删除.

更多信息 我花了一些时间在HTML5拖放库上工作,我在文档中写了更多关于这个和其他问题的文章,如果你有兴趣请看看 项目

我有一些数据,我试图用D3力布局显示.如果这是一个天真的问题,或者我在问题标题中使用的术语不准确,请道歉.我找不到我想要的答案.

我做了一个小提琴,展示了我在这里的内容:

http://jsfiddle.net/stevendwood/f3GJT/8/

在示例中,我有一个节点(0),它有很多链接.另一个节点(16)具有较少量的链路,0和16都连接到15.

所以我想要的是0和16是小集群,它们的连接节点出现在它们周围的一个漂亮的圆圈中.

我徒劳地尝试根据链接的数量来定制费用,但我认为我想要做的是以某种方式使节点更多地吸引他们所连接的节点,而不是吸引他们没有连接到的节点.

如果可能,我想要这样的东西:

var w = 500,
h = 500,
nodes = [],
links = [];

/* Fake up some data */
for (var i=0; i<20; i++) {
    nodes.push({
        name: ""+i
    });
}

for (i=0; i<16; i++) {
    links.push({
        source: nodes[i],
        target: nodes[0]
    });
}

links.push({
     source: nodes[16],
     target: nodes[15]
});

for (i=17; i<20; i++) {

    links.push({
        source: nodes[i],
        target: nodes[16]
    });
}

var countLinks = function(n) {
    var count = 0;
    links.forEach(function(l) {
        if (l.source …