是)我有的:

我有一个可拖动的div,其恢复参数设置为"无效".

我需要的:

当恢复发生时,我想触发CSS更改到另一个元素.

问题:

"revert"是参数而不是事件,因此在恢复发生时触发所需的CSS更改时遇到很大困难.

我的代码:

$('#peg_icon').draggable({
    revert: 'invalid',
    scroll: false,
    stack: "#peg_icon",
    drag: function(event, ui) {
        $('#peg_icon').css('background-image','url(images/peg-icon-when-dragged.png)');
    }
});

我尝试过的:

我没有尝试使用"revert"作为事件:

revert: function(event, ui) {
    $('#peg_icon').css('background-image','url(images/peg-icon-default.png)');
},

我也无意中试图让revert paramater接受这个功能:

function(socketObj)
  {
     //if false then no socket object drop occurred.
     if(socketObj === false)
     {
        //revert the peg by returning true
        $('#peg_icon').css('background-image','url(images/peg-icon-default.png)');
        return true;
     }
     else
     {
        //return false so that the peg does not revert
        return false;
     }
  }

语境:

我正在拖动一个div,当拖动时,背景图像会改变,当拖动恢复时,背景图像将恢复到其原始状态.

我的问题:

在拖动时发生恢复时,如何触发对其他元素的CSS更改？

(注意: 有些人提出了类似的问题,但过于具体而没有得到有用的答案)

jQuery UI的可拖动小部件具有捕捉到网格的选项,但无法设置网格相对于什么.

例如,我们的放置目标中有一个明确定义的20x20网格.在放置目标内以0,0开始的拖动项将与网格对应捕捉.但是,从不同位置或放置目标外部开始的拖动项目将不会与该网格对齐.

http://jsfiddle.net/FNhFX/5/

HTML:

<div class="drop-target">
    <div class="drag-item">Drag me</div>
    <div class="drag-item" style="left:87px;top:87px;">Drag me</div>
</div>
<div class="outside-drag-item">Drag me</div>

JS:

$(function() {
    $(".drag-item").draggable({
        grid: [20, 20]
    });
    $(".outside-drag-item").draggable({
        grid: [20, 20],
        helper:"clone"
    });
    $(".drop-target").droppable({
        accept: ".drag-item"
    });
});

有没有办法使用jQuery draggable捕捉到特定的网格？

我正在使用jquery ui draggable,并最终可以放置以便将图片重新排序到不同的盒子中.

当我将图片从包装盒中拖出时,一旦它离开其直接容器,它就会出现在所有其他元素下面.

谷歌搜索时,我能够找到添加:

   helper: 'clone',
   appendTo: "body"

这使得它被拖动出现在所有元素的顶部,但它仍然保留在框中的原始副本,我不希望这样.

有没有办法让我在拖动时让元素保持在一切的顶部？我尝试过高z-index无济于事.

这是一个jsfiddle,它显示了第二个背后的第一个draggle元素.反过来说这不是问题.我不能在不破坏很多其他事情的情况下更改包含div的相对位置.

http://jsfiddle.net/cBWhX/6/

我正在尝试使用.draggable()通过Meteor订阅填充的jQuery UI创建一组可拖动的DOM对象.我提出的代码看起来像

Meteor.subscribe('those_absent', function() {
     $( "li.ui-draggable" ).draggable( { revert: "invalid" } );
});
Meteor.subscribe('those_present', function() {
     $( "li.ui-draggable" ).draggable( { revert: "invalid" } );
});

这些与一些Meteor.publish()调用相对应,因此只要集合发生更改,.draggable()就会附加行为.至少,这是我的意图.

然而,它只能工作一次 - 一旦其中一个<li>被拖放,那么它们就不再是可拖动的了.

当对象被删除时,我正在触发附加到Template项目的自定义事件,就像这样

    $( "#c_absent .inner-drop" ).droppable({
        drop: function( event, ui ) {
            ui.draggable.trigger('inout.leave');
        }
    });


  Template.loftie_detail.events = {
      'inout.leave': function (e) {
          Lofties.update({_id:this._id}, {$set: {present: 'N' }});
      }
  };

因此,我的想法是对drop上的集合的这种更改应该通过pub/sub进程传播并重新运行.draggable()上面的行.但它似乎没有.

完整的代码可以在这里看到https://github.com/sbeam/in-out/blob/master/client/inout.js,该应用程序现在在http://inout.meteor.com/(那里是一些其他可能无关的问题,项目随机丢失值或完全从UI中消失)

因此,如果我对Meteor中pub/sub的工作原理有所了解,那么最好知道.或者是否有更有效的方法来实现这种无需行为的UI行为绑定？

我真的没有问题但是,我注意到Draggable对象有时会有缓慢的占位符.

我做了这个测试:http://jsfiddle.net/X3Vmc/

    $(function () {         
        $("#myproducts li").draggable({
            /*appendTo: "body",*/
            helper: "clone",
            connectToSortable: "#mylist",
            tolerance: "pointer"
        });
        $("#mylist").sortable({
            placeholder: "sortable-placeholder", 

            over: function () {
                console.log("over");

            },
            out: function () {
                console.log("out");
            }
        });
    });

在draggable中添加列表对象很容易没有问题,但是当我尝试移动可拖动对象中的元素时,我发现红色占位符的移动速度很慢.

我的意思是,有时候水平移动元素,占位符会有更多时间移动(更新其位置).我必须在新位置移动鼠标以更新占位符的位置.我想让它更具反应性.这可能吗？

编辑:

看一下图片.如你所见,我正在第一个和第二个位置之间移动一个元素(从第四个位置).正如您所看到的,占位符远离那里.

编辑2:

我正在使用*Chromium 30.0.1599.114 Ubuntu 13.10(30.0.1599.114-0ubuntu0.13.10.2)*

如果有人可以帮我弄清楚如何使div中包含的可拖动元素根据窗口大小改变比例,我真的很感激任何指导.

如果我做:

element.draggable({ 
    cursor: "move",
    containment: '#container'
});

会发生什么是它给了我对容器的常规尺寸的遏制.所以,如果我有一个transform: scale(1.5),那么容器中将有可拖动元素无法运行的空间.

我也尝试过,containment: 'parent'但这很麻烦.

编辑

我已经找到了如何获得顶部和左侧的收容,但我无法弄清楚如何获得正确和最低限度.

var containmentArea = $("#container");

containment:  [containmentArea.offset().left, containmentArea.offset().top, ???, ???]

我尝试过宽度和高度,containmentArea[0].getBoundingClientRect()但这似乎也不是正确的举动.

这是一些示例代码的jsfiddle.

是否可以使用基本的jQuery脚本实现拖放(不使用jQuery UI)？

使用jQuery Draggable

如何限制拖动只能在一个方向上拖动？
即,只有当时只有顶部或者只有底部axis: 'y'
,或者只有左边或者只有当时才有axis: 'x'

这意味着如果我想(with axis set to 'y')将拖动器仅拖动到bottom,那么它应该无法将其拖动到顶部,即当它试图拖向顶部时它应该保持在其位置

这是我尝试但没有工作,即可拖动仍然向上拖动

$('. draggable').draggable({
    axis: 'y',
    handle: '.top'
    drag: function( event, ui ) {
       var distance = ui.originalPosition.top - ui.position.top;

       // if dragged towards top
       if (distance > 0) { 
           //then set it to its initial state
           $('.draggable').css({top: ui.originalPosition.top + 'px'});
       }
   }
});

我正在使用Angular的这个插件.在文档中它说

要调用的onDrop回调方法将draggable放入droppable中

所以我尝试使用它(相关部分是onDrop ="myCallback"):

<div class="thumbnail" data-drop="true" 
        onDrop="myCallback" ng-model='list1' 
        data-jqyoui-options="optionsList1" 
        jqyoui-droppable="{multiple:true}">
    <div class="caption">
        <div class="btn btn-info btn-draggable" 
              ng-repeat="item in list1" 
              ng-show="item.title" 
              data-drag="{{item.drag}}" 
              data-jqyoui-options="{revert: 'invalid'}" 
              ng-model="list1" jqyoui-draggable="{index: {{$index}},animate:true}">                
        {{item.title}}
        </div>
    </div>
</div>

并在范围内定义了函数,如下所示:

$scope.myCallback = function(event, ui){
    console.log('Dropped into something');
};

http://plnkr.co/edit/kiYrIU?p=preview

正如您从Plunker中看到的那样,这不起作用,由于某种原因找不到回调函数(它可能没有查看范围？).

我已尝试过多种变体,例如onDrop="myCallback(event, ui)"或onDrop="myCallback"等等.这些都没有奏效.

这是一个错误还是我没有正确使用它？

提前致谢.

我正在使用jquery UI和jQuery draggable,我的所有draggable都使用jquery clone helper并将draggable追加到droppable.

这是我的代码

 $('#squeezePage #droppable').droppable({
  tolerance: 'fit',
  accept: '#squeezeWidgets .squeezeWidget',
  drop: function(event, ui) {
   var dropElem = ui.draggable.html();

   var clone = $(dropElem).clone();

   clone.css('position', 'absolute');
   clone.css('top', ui.absolutePosition.top);
   clone.css('left', ui.absolutePosition.left);

   $(this).append(clone);

   $(this).find('.top').remove();
   $(this).find('.widgetContent').slideDown('fast');

   $(this).find('.widgetContent').draggable({
    containment: '#squeezePage #droppable',
    cursor: 'crosshair',
    grid: [20, 20],
    scroll: true,
    snap: true,
    snapMode: 'outer',
    refreshPositions: true
   });

   $(this).find('.widgetContent').resizable({
    maxWidth: 560,
    minHeight: 60,
    minWidth: 180,
    grid: 20,
   });
  }
 });

我用.css('top', ui.absolutePosition.top);和设置克隆css('left', ui.absolutePosition.left);的位置,但位置相对于BODY.

该位置与droppable无关,这使得可拖动的下降到随机位置.总体而言,可投放和可拖动的集成并不紧张.我想让它更顺畅.