jQuery UI Draggable - 如何防止浏览器图像拖动（到桌面）答案

【问题标题】：jQuery UI Draggable - how to prevent browser image dragging (to desktop)jQuery UI Draggable - 如何防止浏览器图像拖动（到桌面）
【发布时间】：2014-02-24 21:10:22
【问题描述】：

我在这里不知所措。我有一个基于 jQuery UI 可拖动的可拖动应用程序运行良好。它做我想做的一切。但是，当我去拖动图像时，允许我将图像拖放到桌面或其他浏览器选项卡的本机浏览器功能总是意味着我必须单击图像并拖动它一点，然后放手，然后再次单击并拖动以使可拖动。我知道我已经看到可以拖动图像而不会发生这种情况的网站。

Here is a brief video showing you what is happening - 在视频中，第一次单击时，当拖动启用器变为绿色时，我抓住并摇晃我正在拖动的图像。这是浏览器行为，我可以将这个图像放到我的桌面上，也可以放到标签栏上以在新标签中打开它。第二次单击图像时，它会上下滑动，仅限于垂直轴，如函数调用中所定义。

I've tried just about everything on this page 和其他喜欢它的人，所有这些都倾向于禁用图像的任何拖动，包括我希望它如何拖动。我还在每个图像周围添加了 div，没有任何变化。有什么想法吗？

这是我的代码：

//Accessories dragging
var $drag_contain = $('#current_build');
$(document).on('drag', '.drag', function(ev,dd) {
    $(this).draggable({
        disabled: false,
        axis: "y",
        stop: function(event, ui) {
            //when dragging is done, remove ability to drag
            $(this).css('z-index','5').removeClass('drag').draggable('disable');
        }
    });
});

这里是 HTML

  <div id="current_build">
<div class="10117" style="z-index:2;top:0px;left:0px;"><img src=
"/assets/images/config_combos_sized/bas_18invhrcfootpedal.png" /></div>

<div class="10124" style="z-index:3;top:0px;left:0px;"><img src=
"/assets/images/config_combos_sized/col_47_5inshortvhrc.png" /></div>

<div class="10356" style="z-index:1;top:0px;left:0px;"><img src=
"/assets/images/config_combos_sized/cas_4intwin_18invhrc.png" /></div>

<div class="10362" style="z-index:4;top:-27px;left:0px;"><img src=
"/assets/images/config_combos_sized/dm_dualmonitormount.png" /></div>

<div class="10374" style="z-index:5;top:34px;left:0px;"><img src=
"/assets/images/config_combos_sized/acc_dividedutilitybin.png" /></div>

显然，此时我的图像周围有 div。

【问题讨论】：

标签： jquery jquery-ui draggable

【解决方案1】：

你可以的

<div style="background: url('/assets/images/config_combos_sized/bas_18invhrcfootpedal.png') no-repeat;"></div>

然后你可以拖动它而不用担心浏览器的行为。

【讨论】：

【解决方案2】：

事实证明，我根据其他交互多次调用拖动启用和禁用。重构我的事件解决了这个问题。

【讨论】：