标签: jquery-ui-draggable

拖动对象时,用户可以在x和y轴上拖动.我想将可拖动性限制为仅x轴.我应该怎么做呢？

谢谢!

我正在构建一个弹出图像库,用户可以从弹出窗口中拖动图像并将其放在页面的其他位置.

弹出库是一个叠加div(使用css)所以没有iframe或其他任何东西.

我已经使用JQUERY UI成功实现了拖放,但我想要的是 -

每当用户将图像拖出图库弹出div时,弹出div应隐藏/淡出,图像可以放在其他地方.但问题是,一旦我隐藏了画廊弹出div(原始容器),我的助手克隆也会消失.(但是仍然会掉落,但我失去了视觉反馈)

我已经尝试将gallery div的位置移动到-999,-999(没有隐藏它)但是甚至隐藏了我的视觉反馈克隆(帮助器)

有人请帮我找到解决方案.

谢谢

在我的脚本中,我有2个按钮,一个是为了启用可拖动而另一个是为了禁用它.以下是我如何做到这一点

$('#Enable').click(function(){
   $("#sortable li").draggable({
                disabled : false
            });
});

$('#Disable').click(function(){
   $("#sortable li").draggable({
                disabled : true
            });
});

我的问题是,当我禁用可拖动功能时,我的所有元素都会逐渐淡出.有没有办法防止这种淡出每次我禁用拖动？这是我在jsFiddle中的代码

我正在使用jQuery UI Draggable和Droppable小部件实现拖放。（Sortable没有为我提供足够的灵活性。）

拖动时，我正在动态创建放置占位符元素以精确显示放置放置的位置。

但是如何使此放置占位符本身可放置？如果创建它，然后立即对其调用该droppable()方法，则没有任何效果。因此，如果他们将用户直接放在放置占位符上，我怎么能检测到呢？

您可以在http://jsbin.com/uciviy/14上看到到目前为止的内容。

我想在div中创建一个可拖动的区域.它工作正常,但我不希望可拖动区域外的空白区域,因此想要限制可以拖动的区域.到目前为止我所得到的就是这个小提琴.

图像最初位于父div的左上角.如果将其拖动到右侧或底部,您可以看到我不喜欢的空白区域.我怎么能限制这个？

我认为可以使用jQuery UI的Draggable事件中的Containment参数来完成

$( ".selector" ).draggable({ containment: "" });

但我无法弄清楚如何.此外,如果整个页面是一个可拖动的元素(类似于谷歌地图),我该如何限制？

我正试图围绕正确使用jQuery UI的droppable工具.我正在研究一个最终将作为队列运行的列表.这是一个图书俱乐部,顾客可以选择他们想要运送给他们的书籍,以及订购的顺序.它类似于Netflix的原始商业模式(流媒体之前),用户可以在其中设置他们想要感兴趣的DVD队列.

因此,将有两个列表,一个表示用户的队列,另一个表示符合条件的项目.他们可以将符合条件的项目列表中的项目拖动到其队列中.在这种情况下,该项目将保留在"符合条件的项目"列表中,并将克隆添加到其队列中(因为它们可以添加多个相同的项目).

队列应该可以通过拖放重新排序,但我还没有那么远.一步一步来.

在处理"从符合条件的项目列表拖到队列列表"步骤时,我遇到了以下问题:添加到列表中的新项目不是放置目标.看看代码,这是有道理的:

<ul id='list1'>
    <li>Some</li>
    <li>Thing</li>
</ul>

<ul id='list2'>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
    <li>Electric Banana</li>
    <li>Flamingo Pink</li>
</ul>

jQuery(document).ready(function($) {
    $('#list2 li').draggable( {
        cursor: 'move',
        helper: 'clone',
    });
    $('#list1 li').droppable({
        drop: function(event, ui){
            console.log(event);
            console.log(ui);

            var dropElement = jQuery.clone(ui.draggable[0]);
            // Get rid of the inline styles that jQuery has put on the element.
            jQuery(event.target).before(dropElement);
        }
    });
});

您可以看到droppable侦听器仅用于初始化期间#list1中的项目.所以当你从#list2中拖动它时,它会被添加到列表中,但是没有drop事件的监听器.

我通过向每个添加到列表中的项添加一个drop listener来修复此问题(请参阅小提琴):

jQuery(document).ready(function($) {
    $('#list2 li').draggable( {
        cursor: 'move',
        helper: 'clone',
    });
    $('#list1 li').droppable({ drop: dropHandler });

    function …

当我尝试transform: rotate(45deg)使用jQuery UI draggable拖动绝对定位和旋转div(使用css3 )时,似乎jQuery不知道旋转div的新原点在哪里.因此,当您开始拖动时,div会立即移动几个像素.

这是一个jsFiddle所以你可以自己看看:http://jsfiddle.net/k7g7R/4/ (点击它旋转div然后拖动它).

请注意,当可拖动div处于相对位置时,它可以正常工作.

有谁知道发生了什么,以及我如何解决这个问题？

在使用jQuery UI之前,我已将元素在直线路径上拖动并固定到轴上,如下所示:

$('#element').draggable({
    axis:'y'
});

但是,我想知道如何使一个元素可拖动,同时遵循一条基本上是可拖动线的特定路径.

我在开头基本上有一个元素的样式/位置和它的结束位置的另一个样式/位置,我希望它沿着这两个位置之间的路径可拖动.

我怎么能用javascript或jQuery做到这一点？

问题

我有4张图片.用户可以将它们拖放到另一个列表并更改图像的顺序.目标是用户选择图像的顺序.问题是,当它们彼此放置时,我无法交换这些图像.

HTML

<ul id="choices">
    <li><img src="http://placehold.it/200x200&text=1" /></li>
    <li><img src="http://placehold.it/200x200&text=2" /></li>
    <li><img src="http://placehold.it/200x200&text=3" /></li>
    <li><img src="http://placehold.it/200x200&text=4" /></li>
</ul>

<ul id="answers">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

jQuery的

(function ($) {

    $("#choices li img").draggable({
        revert: true,
        zIndex: 10,
        snap: "#answers li",
        snapMode: "inner",
        snapTolerance: 40
    });

    $("#answers li").droppable({
        drop: function (event, ui) {
            var dropped = ui.draggable;
            var droppedOn = this;

            if ($(droppedOn).children().length > 0) {
                alert("I need to swap these");
            }

            $(dropped).detach().css({
                top: 0,
                left: 0
            }).prependTo($(droppedOn));
        }
    });
})(jQuery);

CSS(不重要) …

我需要一些控件才能在iFrame中使用Drag&Drop.我需要iframe中的功能的原因是因为我们正在构建的CMS以及"编辑页面"中的任何"绝对"css更改也将影响主站点.

我已经写了一个角度指令,并为此构建了一个小型原型,只要它在同一页面上它就完美无缺,但是当我试图在iframe中做同样的事情时,它只是不起作用.甚至从iFrame页面注册droppbale也不会显示在控制台中(当尝试登录指令时).

它是1个寻呼机代码,可在此查看 - http://78.110.163.229/angDnd/outer.html

任何指导/建议都会非常有帮助.