Tag: jquery ui draggable

准确降低可缩放div上的可拖动元素

问题 我有一个小问题拖动元素到一个可伸缩的div容器。 一旦元素实际上在容器中,元素就会很好的拖拽,并按照它们应该的方式工作。 拖到可伸缩容器上的较大元素没有太多问题。 但是,当拖动较小的元素时,可以看到鼠标不再附加到所述元素上,并且当它被放下时,它会掉落一点。 我正试图find一个解决scheme,我的鼠标停留在元素上,并且掉落在应该放置的地方。 我已经解决了一点一滴的问题,你可以在下面看到,但这是让我疯狂的难题的最后一块。 如果有人有时间伸出援助之手,将不胜感激。 这是一个codepen – 单击并将两个蓝色的元素拖到白色的容器来尝试一下 Codepen 全屏幕视图 行动中的短GIF 这将有助于确保可放置区域与缩放容器一起使用。 $.ui.ddmanager.prepareOffsets = function(t, event) { var i, j, m = $.ui.ddmanager.droppables[t.options.scope] || [], type = event ? event.type : null, list = (t.currentItem || t.element).find(":data(ui-droppable)").addBack(); droppablesLoop: for (i = 0; i < m.length; i++) { if (m[i].options.disabled || (t && […]

用jQueryUI拖动可拖动的对象

我想要使​​用jQuery的可拖/放,让用户select一组对象(每个对angular有一个checkbox),然后将所有选定的对象作为一个组… 我无法弄清楚我的生活如何做到这一点哈哈。 这是我想的将导致一个可用的解决scheme,在每个可拖动的对象,使用start()事件,并以某种方式抓住所有其他选定的对象,并将其添加到select 我还在考虑只是为了提高性能,将拖拽的对象看起来像一组对象(它们是图像,所以可能是一堆照片)。 如果一次拖动几十个对象,我认为使用可拖动function可能会失败,这听起来像是一个更好的主意吗?

jQuery Droppable,获取元素丢弃

希望有一个简单的答案的小问题,我使用jQuery拖动和droppable放置项目到docker。 使用下面的代码来放置。 $("#dock").droppable({ drop: function(event, ui) { //Do something to the element dropped?!? } }); 然而,我找不到一个方法来获取实际放弃的元素,所以我可以做一些事情。 这可能吗?

当我制作一个可拖动的克隆并将其拖放到可拖放状态时,我不能再拖动它

当我制作一个可拖动的克隆并将其拖放到一个可拖拽的位置时,我不能再拖动它。 我怎么做? 其次,我只能弄清楚如何.append添加克隆到droppable。 但是,在任何现有元素之后,它会捕捉到左上angular,而不是放置位置。 $(document).ready(function() { $("#container").droppable({ drop: function(event, ui) { $(this).append($(ui.draggable).clone()); } }); $(".product").draggable({ helper: 'clone' }); }); </script> <div id="container"> </div> <div id="products"> <img id="productid_1" src="images/pic1.jpg" class="product" alt="" title="" /> <img id="productid_2" src="images/pic2.jpg" class="product" alt="" title="" /> <img id="productid_3" src="images/pic3.jpg" class="product" alt="" title="" /> </div>

在两个可拖动的div之间画一条线

是的,我知道在以下链接中已经询问过这类问题: 问题1 , 问题2和问题3 。 但是我的问题与已经提出的问题是完全不同的。 我想要的是:我有两个可拖动的div,并有一个连接器(一条直线)之间(用SVG线绘制)。 当我移动这些可拖动div的时候,我需要在它们之间移动一个连接器。 我的问题更类似于问题3 ,但是在那个问题中,一旦用户在div之间build立连接,那些div停止拖动,所以他们不关心刷新连接器。 有没有人遇到过我正在说的任何工作示例或演示? 或者,有没有人可以给我任何想法如何以最佳的方式做到这一点? 以防万一,我使用jQuery作为一个JavaScript框架(如果值得知道的话)。 非常感谢。 更新1 我也发现这个演示 ,但它工作非常糟糕,我会说错误的。

jQuery可拖动页面滚动后显示帮助错误的地方

我正在使用jQuery 可拖动和可 拖动的工作计划系统,我正在开发。 用户将作业拖至不同的date或用户,然后使用ajax调用更新数据。 一切工作正常,除了当我向下滚动主页面(工作出现在超过我的浏览器窗口的底部大周计划)。 如果我尝试在这里拖动一个可拖动的元素,那么元素会出现在我的鼠标光标上方,像素数量已经向下滚动。hover状态仍然正常,function很强大,但是看起来不正确。 我使用jQuery 1.6.0和jQuery UI 1.8.12。 我确定有一个补偿函数,我需要添加,但我不知道在哪里应用它,或者如果有更好的方法。 这是我的.draggable()初始化代码: $('.job').draggable({ zIndex: 20, revert: 'invalid', helper: 'original', distance: 30, refreshPositions: true, }); 任何想法我可以做什么来解决这个问题?