如何使用jQuery UI拖动和放置元素？

Question

我有两个div.containers。这两个容器都有div.item。使用jQuery，如何通过拖拽&下拉来切换div.item元素？两个元素都应该能够重新交换。

有没有简单的方法来做到这一点？

谢谢...

Answer 1

OK，我得到了肮脏的解决方案......

$(document).ready(function() { 
    src = null; 
    options = { 
     revert:true, 
     axis: 'x', 
     opacity: 0.8, 
     start: function() { 
      src = $(this).parent(); 
     } 
    }; 

    $(".item").draggable(options); 
    $(".container").droppable({ 
     drop: function(event, ui) { 
      src.append(
       $('.item', this).remove().clone() 
       .removeClass().addClass("item") 
       .css({"left": '', "opacity": ''}) 
       .draggable(options) 
      ); 

      $(this).append(
       ui.draggable.remove().clone() 
       .removeClass().addClass("item") 
       .css({"left": '', "opacity": ''}) 
       .draggable(options) 
      ); 
     } 
    }); 
}); 

希望，有人能改善这个... :)

欢呼......

Answer 2

我发现这个解决方案在pengoworks：

jQuery.fn.swap = function(b) { 
    b = jQuery(b)[0]; 
    var a = this[0]; 
    var t = a.parentNode.insertBefore(document.createTextNode(''), a); 
    b.parentNode.insertBefore(a, b); 
    t.parentNode.insertBefore(b, t); 
    t.parentNode.removeChild(t); 
    return this; 
}; 

Answer 3

@Ei貌..

我从你肮脏的解决方案顺利解决..

$(document).ready(function() { 
    src = null; 
    options = { 
     revert:true, 
     /*axis: 'x',*/ 
     opacity: 0.8, 
     start: function() { 
       src = $(this).parent(); 
     } 
    }; 

    $(".item").draggable(options); 
    $(".container").droppable({ 
     drop: function(event, ui) { 
       src.append(
         $('.item', this).remove().clone() 
         .removeClass().addClass("item") 
         .css({"left": '', "opacity": '',"top":''}) 
         .draggable(options) 
       ); 

       $(this).append(
         ui.draggable.remove().clone() 
         .removeClass().addClass("item") 
         .css({"left": '', "opacity": '',"top":''}) 
         .draggable(options) 
       ); 
     } 
    }); 

}); 

Answer 4

晚了一点，也许，但我认为这是一个更好的解决方案...将发布的文件/搜索目的是在其他人觉得这个有用的情况下

注意：您还需要在UI构建中加载jQuery UI的Position元素才能使此解决方案起作用。

在我的例子中，我创建了一组可拖放的“优惠券”，可以放置在不同的位置。在特定时间只有一张优惠券可以放在任何可投放区域。

为了设法投掷的区域优惠券分配，我创建了我会用延长拖动&可弃原型的选择对象的一些辅助对象：

var dropObj = { hasCoupon: false, couponId: null } 
var couponObj = { dropId: null } 

然后（在DOM就绪）扩展：

$.extend($.ui.droppable.prototype.options, dropObj); 
$.extend($.ui.draggable.prototype.options, couponObj); 

最后，设置你的拖拽元素& droppables ......当你设置可放开使用jQuery UI的位置帮手来协助调换拖拽元素...

$('.selector').droppable({ 
    drop: function(event, ui) { 
     var current, swapId; 
     if ($(this).droppable('option', 'hasCoupon') === false) { 
      // ... 
     } else { 
      current = $(this).droppable('option', 'couponId'); 
      swapId = ui.draggable.draggable('option', 'dropId'); 
      if (swapId !== null){ 
       current.position({ 
        my: "center", at: "center", of: swapId, 
        using: function(to) { 
         $(this).animate({ 
          top: to.top, 
          left: to.left 
         }, ui.draggable.revertDuration, function() { 
          swapId.droppable('option', 'hasCoupon', true); 
          swapId.droppable('option', 'couponId', current); 
          current.draggable('option', 'dropId', swapId); 
         }); 
        } 
       }); 
      } 
     } 
     $(this).droppable('option', 'hasCoupon', true); 
     $(this).droppable('option', 'couponId', ui.draggable); 
     ui.draggable.draggable('option', 'dropId', $(this)); 
     ui.draggable.position({ my: "center", at: "center", of: $(this), 
      using: function(to) { $(this).animate({ top: to.top, left: to.left }, 150); } 
     }); 
    } 
}); 

注：我们手动动画回调交换设定值couponId/dropId，因为拖动事件实际上并没有在这种情况下射击（运动通过jQuery的动画调用处理代替）。

我在最初使用dragstart/dragstop时使用了.trigger（），但他们没有触发drop事件，因为我认为他们应该这样做。

Answer 5

也许我失去了一些东西，但我想我有一个更简单的解决方案：

$('.droppable').droppable({ 
    drop: function (event, ui) { 
     ui.draggable.parent().append($(this).children()); 

     $(this).append(ui.draggable); 

     ui.draggable.css({ 
      left: '', 
      top: '' 
     }); 
    } 
}); 

一言以蔽之：

1. 当拖动项目在可投放区域下降，得到可拖动项目的（上一个）父元素。
2. 从可放置区域移除子项并将它们附加到可拖动项目的父元素。
3. 从其（前一个）父元素中移除可拖动项目，并将其附加到放置它的放置区域。
4. 可拖动项目的位置在这一点上会很奇怪，因为我们已经从页面中删除了元素并重新添加它们，因此重置其位置。

Answer 6

$(function() { 
     $('#sortable').sortable({ 
      start: function (e, ui) { 
       // creates a temporary attribute on the element with the old index 
       $(this).attr('data-previndex', ui.item.index()); 
      }, 
      update: function (e, ui) { 
       // gets the new and old index then removes the temporary attribute 
       newIndex = ui.item.index(); 
       oldIndex = $(this).attr('data-previndex'); 
       $(this).removeAttr('data-previndex'); 
       tempNew = newIndex - 1; 
       tempoldIndex = oldIndex; 
       if (oldIndex > newIndex) { 
        tempNew = newIndex + 1; 
        $("#sortable li:eq(" + tempNew + ")").insertAfter($("#sortable li:eq(" + tempoldIndex + ")")); 
       } else { 
        $("#sortable li:eq(" + tempNew + ")").insertBefore($("#sortable li:eq(" + tempoldIndex + ")")); 
       } 
      } 
     }); 
    }); 

//通过ubaidullah瓒编码和验证