相关疑难解决方法(0)

Internet Explorer 9拖放(DnD)

有谁知道为什么以下网站拖放示例(加上许多其他在线教程)在Internet Explorer 9中不起作用?Chrome,FireFox和Safari都可以.

http://www.html5rocks.com/tutorials/dnd/basics/

我认为IE9被认为是最符合HTML5标准的浏览器?尤其是DnD,因为自IE5以来它们一直支持它.我是否必须在某处更改设置?

我玩HTML5和CSS3越多...... IE9缺乏的越多.

有没有人有任何链接到在IE9中工作的DnD教程?

html5 drag-and-drop internet-explorer-9

31
推荐指数
2
解决办法
5万
查看次数

jQuery拖放模拟对最后一个draggable不起作用

我试图使用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上,而第三列是正常divs.在拖放模拟之后,第3个draggable不会位于Firefox中的第3个droppable上,并随光标移动直到发生单击.如何让它像其他拖动器一样自动坐在droppable上?

编辑:
如果你想把结果作为一个普通的网页而不是js-fiddle,你可以在这里找到.

jquery drag-and-drop jquery-ui jquery-ui-draggable jquery-ui-droppable

5
推荐指数
1
解决办法
509
查看次数

如何检测浏览器支持File API拖放

我喜欢在div上添加背景,仅适用于支持拖放文件的浏览器

我不喜欢使用modernizr,只是一行脚本

javascript drag-and-drop fileapi

4
推荐指数
1
解决办法
7092
查看次数