Question

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

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。

Answer 1

你可以做到

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

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

Answer 2

原来我正在调用draggle启用并根据其他交互禁用太多次。我的事件的重构解决了这个问题。

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

2 个答案: