标签: jquery-ui-draggable

我如何(或哪些工具可用)在两个或多个元素之间绘制一条线来连接它们？HTML/CSS/JavaScript/SVG/Canvas的任意组合都可以.

如果您的答案支持其中任何一项,那么请提及:

• 可拖动的元素
• 可拖动/可编辑的连接
• 元素重叠避免

此问题已更新,以巩固其中的众多变体.

我正在使用jQuery draggable和droppable来开发我正在开发的工作计划系统.用户将作业拖到不同的日期或用户,然后使用ajax调用更新数据.

一切正常,除非我向下滚动主页面(作业出现在超出浏览器窗口底部的大型周规划器中).如果我尝试在这里拖动一个可拖动的元素,那么元素会出现在我的鼠标光标上方与我向下滚动的像素数量相同.悬停状态仍然可以正常工作并且功能正在爆炸,但看起来并不正确.

我正在使用jQuery 1.6.0和jQuery UI 1.8.12.

我确定我需要添加一个偏移功能,但我不知道应用它的位置,或者是否有更好的方法.这是我的.draggable()初始化代码:

$('.job').draggable({
  zIndex: 20,
  revert: 'invalid',
  helper: 'original',
  distance: 30,
  refreshPositions: true,
});

知道我能做些什么来解决这个问题吗？

当我制作一个可拖动的克隆并将其放入一个droppable时,我无法再拖动它.我怎么做？其次,我只能弄清楚如何.append将克隆添加到droppable中.但是它会在任何现有元素之后捕捉到左上角而不是掉落位置.

$(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>

一个小问题希望通过一个简单的答案,我使用jQuery draggable和droppable将项目放入Dock.使用以下代码进行删除.

$("#dock").droppable({
            drop: function(event, ui) {
                //Do something to the element dropped?!?
            }
        });

但是我找不到一种方法来获取实际丢弃的元素,所以我可以做一些事情.这可能吗？

我想使用jquery draggable/droppable让用户选择一组对象(每个对象在角落都有一个复选框),然后将所有选定对象作为一个组拖动...

我无法弄清楚我的生活怎么做哈哈.

以下是我想要在每个可拖动对象上创建可用解决方案的内容,使用start()事件并以某种方式获取所有其他选定对象并将其添加到选择中

出于性能原因,我还在考虑让拖动的物体看起来像一组物体(它们是图像,所以可能是一堆照片).我认为如果你一次拖动几十个对象,使用可拖动功能可能会失败,这听起来更好吗？

问题

我在将元素拖到可伸缩的div容器上时遇到了一个小问题.

一旦元素实际上在容器中,元素就会拖动并按照预期的方式工作.

拖动到可伸缩容器上的较大元素没有太多问题.

但是当拖动较小的元素时,您可以看到鼠标不再附加到所述元素上,当它被丢弃时,它会在它应该下降的地方稍微下降.

我正在尝试找到一个解决方案,我的鼠标停留在元素上,它会掉落到应该放下的位置.

我已经一点一点地解决了问题,你可以在下面看到,但这是让我疯狂的最后一块拼图.如果有人伸出援助之手的时候,这将是极大的赞赏.

这是一个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 && !m[i].accept.call(m[i].element[0], (t.currentItem || t.element)))) {
      continue;
    }
    for (j = 0; j < list.length; j++) {
      if (list[j] === m[i].element[0]) {
        m[i].proportions().height = 0; …

如果在另一个问题中回答这个问题,我很抱歉,我无法找到特定于我的问题的答案!

我正在尝试测试jQuery draggable是否被放弃在合法的dropable之外.这通常会在90%的时间内通过恢复可拖动来解决,但我不想这样做.相反,我想做一件事,如果draggable被放到droppable(工作得很好!),以及其他东西,如果它被丢弃到所有可能的droppables之外(目前让我变得更好!).

简而言之:

jQuery('#droppable').droppable(
{
    accept: '#draggable',
    drop: function(event, ui)
    {
        // awesome code that works and handles successful drops...
    }
});

jQuery('#draggable').draggable(
{
    revert: false,
    stop: function()
    {
        // need some way to check to see if this draggable has been dropped
        // successfully or not on an appropriate droppable...
        // I wish I could comment out my headache here like this too...
    }
});

我觉得我错过了一些非常明显的东西...提前感谢任何帮助!

这是一种情况,我希望有人回复告诉我,我是个白痴.但我仍然惊讶于jQueryUI drag\drop不适用于触控设备.我没有测试过它们,但是我在去年尝试了iphone\ipad\android 2,3和4而没有.刚在新的Android上试过最新版本.依然没有.不要相信我,只需访问移动设备上的演示页面并尝试使用drag\drop示例.没有.

这里有技术问题或核心不兼容吗？一个修复如此简单,不值得写？jQuery开发人员不使用移动设备吗？我已经看到Stack Overflow附近发布了"修复",但它们都是"黑客",所有我试过的都不起作用.

我很困惑.有人能解释一下这个问题吗？

如何从可排序列表中排除元素？举例来说,有使用类名称"笔记",我的元素并不想拖动？

    <ul class="sortable">

            <li id="item_3">Item 3</li>
            <li id="item_4">Item 4</li>
            <li id="item_5">Item 5</li>

            <p class="note">This is a note only</p> 
   </ul>

jquery ui sortable,jquery not显然不起作用......

$(function() {
    $( ".sortable:not(.note)" ).sortable(
    }).disableSelection();
});

我有一些非常长的可拖动元素,我可以放在背景表的所有单元格中.

当我开始拖动这种元素悬停我的droppable容器(我的表的单元格)时,知道元素将被丢弃的"热点"是它自身的中间部分.

不幸的是,我的元素中间通常是不可见的,将元素放在正确的位置是没有用的.

是否可以指定光标位置来选择元素将放在哪个容器中而不是元素的中间？

我真的被困住了,我真的很感激任何帮助.

嗨,这是一个描述我的问题的示例代码.黄色div不能轻易落入细胞,因为它太长了.jsbin.com/upunek/edit

谢谢