标签: jquery-ui-draggable

我正在使用jQuery和JQuery ui做一些小应用程序.

我已经定义了一个可拖动的div,它工作得很好,但我想在点击一个按钮时设置div的位置......

我在这里阅读stackOverflow来做到这一点:

element.position().top = topUserDefined;
element.position().left = leftUserDefined;

我在这个赋值之前和之后做了一个关于element.position().top的警告,并且没有分配它的新值,它保留了原始值...

任何的想法？？？谢谢!

我正在使用jQuery UI,可以创建一个简单的拖放列表.但是现在,我想把元素放到另一个列表中.jQuery总是认为该项目已经丢弃在错误的地方并将其滑回原始列表.

如何以编程方式中止jQuery拖动操作？

使用jQuery UI,用户开始拖动操作.在拖动时,会发生异步事件,导致拖动的元素被删除(例如,基于计时器的刷新).在刷新时,我想在刷新之前做一些这样的事情,以避免删除元素的错误:

   element.trigger('dragstop');

但这似乎不起作用.

似乎制作jQuery小部件的常用方法是在元素上调用函数,将选项作为参数传递,然后不再直接触摸小部件.有没有办法在创建窗口小部件后更改它们？

我想创建一个与网格对齐的可拖动框,但如果用户调整页面大小,我想缩放网格.在window resize事件中,如何访问griddraggable元素的属性？

$('.box').draggable({grid: [40,40]});
...
$(window).resize(function(){ ??? });

我有一个可拖动/可排序的列表,我正在动态添加项目,但问题是,一旦添加了项目,就无法将它们移动到新列表.你可以在这里看到这些功能:http://jsfiddle.net/Y4T32/2/

将项目从可用列表拖动到其中一个目标列表,您将看到我的意思.现在添加一个"标注"并尝试将新项目拖动到其中一个目标列.

我发现这里的另一个答案按照我的意愿工作,但是无法重现他们得到的结果(当然,现在找不到答案).我在这里做错了什么？

我有一组可拖动的元素.如何删除可拖动功能？

1. $('.draggable').draggable('disable') 在我的情况下不是一个选项

2. $('.draggable').draggable('destroy') 回报 Uncaught TypeError: Cannot read property 'options' of undefined

当在div元素上使用jQuery UI draggable时,您可以将元素"拖出"在页面的右侧,但页面将只是扩展并使用元素自动滚动.这是有问题的,因为我试图在元素到达窗口的右侧时启动事件.一个警告是,我不能简单地绑定div,以便它不能离开,因为我希望拖动停止光标遇到边缘而不是div(尝试从左侧拖动它看看我的意思,我只是想要在右边复制那个).

我尝试过的:

body {overflow:hidden;} - 初看起来很有效,但如果你仔细检查,那么实际上滚动的实际上并没有使用可见的滚动条.此外,这将用于插件,所以我不能限制用户只溢出:隐藏的身体.

创建窗口大小/固定位置的包装div以触​​发事件,但是主体仍然在固定div下延伸.

我只是需要一种方式来说,如果我拖动一个元素,不要滚动窗口.

这是一个允许拖动的jsFiddle但是离开了窗口:http: //jsfiddle.net/9dx1cxu8/

html:
<div class="box"></div>

javascript (jQueryUi):
$('.box').draggable();

css:
.box{
  left:200px;
  top:200px;
  width: 150px;
  height: 150px;
  box-shadow: inset 0 0 20px
}

这是我的代码:

http://jsfiddle.net/652nk/

HTML

<div id="canvas">
    <div id="dragme"></div>
</div>

CSS

#canvas {
    width:500px;
    height:250px;
    border:1px solid #444;
    zoom:0.7;
}
#dragme {
    width:100px;
    height:50px;
    background:#f30;
}

JS

$(function(){
    $('#dragme').draggable({containment:'parent'})
})

使用css zoom属性时遇到了一个重大问题.目标可拖动div的位置与光标位置不协调.

有没有干净简单的解决方案？我应该能够动态更改缩放.

我正面临拖放问题.

我想要总是看到拖动的元素,我想能够滚动一个特定的div来删除我的表的任何单元格中的元素.我也希望能够将元素从任何div拖动到任何div.

这个例子几乎没用.我的最后一个问题是关于单元格hoverClass属性:当我从"容器B"的边框附近的"容器A"中拖动一个元素时,我实现了一个自动滚动行为,以便在我的表格中导航以到达任何单元格.但是,在滚动模拟之后,hoverClass不适用于正确的单元格.但是,元素总是被放入正确的单元格中.

https://jsfiddle.net/Bouillou/QvRjL/434/

我的方法是否正确？

编辑

我找到了一个解决方法.我们的想法是在helper构造回调期间将元素clone附加到可滚动容器,然后在1ms后使用setTimeout函数将帮助器附加到body.辅助位置必须映射到鼠标位置以避免偏移问题.

这是我的最终解决方案:https://jsfiddle.net/Bouillou/QvRjL/434/

我相信有可能开发出最佳方法.

嘿,我对猫头鹰旋转木马有一个快速的问题.

首次使用此代码时,如何启用touchdrag:

var owl = $(".full-slider");

owl.owlCarousel({
        slideSpeed              : 500,
        singleItem              : true,
        pagination              : false,
        autoPlay                : false,
        afterMove               : slideChanged,
        startDragging           : pauseOnDragging,
        touchDrag               : false,
        mouseDrag               : false
});

根据用户在我的页面上使用的选项,我想禁用拖动到下一张幻灯片的功能.但是如果用户完成选项,那么我想将其启用,以便他们可以拖动到下一张幻灯片.

如何才能做到这一点？我无法在网上找到一个很好的例子.