有谁知道为什么以下网站拖放示例(加上许多其他在线教程)在Internet Explorer 9中不起作用?Chrome,FireFox和Safari都可以.
http://www.html5rocks.com/tutorials/dnd/basics/
我认为IE9被认为是最符合HTML5标准的浏览器?尤其是DnD,因为自IE5以来它们一直支持它.我是否必须在某处更改设置?
我玩HTML5和CSS3越多...... IE9缺乏的越多.
有没有人有任何链接到在IE9中工作的DnD教程?
我试图使用jquery-ui的jquery-simulate-ext插件来模拟拖放 模拟.
在我提供场景细节之前,让我告诉你这里的js小提琴.
我有3列divs
.在第1列中,我有3个带有国家/地区名称的可拖动,第2列有3个空白的dropable divs
和第3列3个div
带有城市名称的正常s.因此,在第一列的所有可拖动物落在第二列之后,第二和第三列行将了解乡村与城市的关系.
但问题是在模拟完成后,第一个和第二个可拖动器被丢弃在预期的可投放器上,但第三个可拖动只是粘在鼠标上而不是掉落在投放器上.要查找行为,在上面提到的js小提琴页面加载后,只需将鼠标光标移动到结果部分,您就会看到一个可拖动的鼠标也随之移动.您必须单击某处以使可拖动的坐在可放置或可拖动的部分(取决于您单击的区域).这只发生在Firefox中,而在chrome中,draggable只是随着光标一起移动到适当的可放置部分内部,然后自动进入内部.
我想要的是: 与其他可拖动器一样,第三个拖动器不应随着鼠标的移动而移动,并且应该自动坐在所需的可放置物上.
代码说明:
每个div
具有类的draggable draggable_div
都有一个属性data-index
(值1,2,3等).droppable divs
(with class droppable_blank
)也是如此.现在在JS代码的开头,我有一句话:
answers_found='[1,2,3]';
Run Code Online (Sandbox Code Playgroud)
这些基本上是data-index
可拖动的值.值的顺序仅显示data-index
可拖动值位于droppable上时的值的顺序.在上面提到的情况下,第一个值是1,因此它将是第一个(不是第二个或第三个)可拖动的,它将位于第一个droppable上.类似地,第二和第三可拖动将连续地位于第二和第三可放置.
代码执行以下for
循环
for(var i =0; i<answers_found.length; i++){
Run Code Online (Sandbox Code Playgroud)
从answers_found
数组中获取每个值.该值是可拖动的data-index
属性值.然后call_trigger_drop
函数给出2个参数:
call_trigger_drop(parseInt(answer_found_indiv),droppable_index);
Run Code Online (Sandbox Code Playgroud)
第一个是可拖动索引,第二个是相应的可放置索引,即拖动将位于droppable上.然后使用以下行进行实际模拟:
draggable.simulate("drag", {
dx: dx,
dy: dy
});
Run Code Online (Sandbox Code Playgroud)
TL; DR:
模拟第一列中的可拖动物落在第二列上的droppables上,而第三列是正常div
s.在拖放模拟之后,第3个draggable不会位于Firefox中的第3个droppable上,并随光标移动直到发生单击.如何让它像其他拖动器一样自动坐在droppable上?
编辑:
如果你想把结果作为一个普通的网页而不是js-fiddle,你可以在这里找到.
jquery drag-and-drop jquery-ui jquery-ui-draggable jquery-ui-droppable
我喜欢在div上添加背景,仅适用于支持拖放文件的浏览器
我不喜欢使用modernizr,只是一行脚本