用jquery拖动div来改变div的位置

我正在尝试构建一个网站，用户可以将某些项目（div中的一个项目）拖动到页面上的其他div。 它不是一张桌子左右，只是在页面上的某个地方划分。

使用html5拖放它运行良好，现在我尝试为移动设备执行此操作。 我可以将项目拖动到div，将它们放在那里并阻止这个dropzone，因为只有一个元素应该在dropzone中。 我也可以将这个元素拖到另一个div或页面上的其他地方（如果我犯了一个错误，可放置区域只能在第一次删除div时工作）但是我不能在div中删除另一个现在为空的项目再次。

如何再次启用Dropzone中的丢弃？

如果一个被拖到另一个div上，是否有可能改变两个div的位置？

这是我的代码的相关部分：

 $ (init); function init() { $(".dragzones").draggable({ start: handleDragStart, cursor: 'move', revert: "invalid", }); $(".dropzones").droppable({ drop: handleDropEvent, tolerance: "touch", }); } function handleDragStart (event, ui) {} function handleDropEvent (event, ui) { $(this).droppable('disable'); ui.draggable.position({of: $(this), my: 'left top', at: 'left top'}); ui.draggable.draggable('option', 'revert', "invalid"); }   
 
Item 1
 
Item 2
 
Item 3
 
Item 4
 
 
 
 
 
  

编辑：这是现在的工作页面： 拖放任务

Answer 1

这是一个有效的例子： http ： //jsfiddle.net/Gajotres/zeXuM/

我认为你的所有问题都在这里得到解决。

• 启用/禁用删除工作
• 返回的元素不再将它们放在其他元素之下
• 返回的元素不再隐藏/删除它们
• 更好的元素定位（看起来更好）
• 它适用于移动设备（在Android 4.1.1 Chrome和iPhone上测试）

这是一个使用的jQuery代码：

 $(document).on('pageshow', '#index', function(){ $(".dragzones").draggable({ start: handleDragStart, cursor: 'move', revert: "invalid", }); $(".dropzones").droppable({ drop: handleDropEvent, tolerance: "touch", }); }); function handleDragStart (event, ui) { } function handleDropEvent (event, ui) { if (ui.draggable.element !== undefined) { ui.draggable.element.droppable('enable'); } $(this).droppable('disable'); ui.draggable.position({of: $(this),my: 'left top',at: 'left top'}); ui.draggable.draggable('option', 'revert', "invalid"); ui.draggable.element = $(this); } // This is a fix for mobile devices /iPad|iPhone|Android/.test( navigator.userAgent ) && (function( $ ) { var proto = $.ui.mouse.prototype, _mouseInit = proto._mouseInit; $.extend( proto, { _mouseInit: function() { this.element .bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) ); _mouseInit.apply( this, arguments ); }, _touchStart: function( event ) { this.element .bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) ) .bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) ); this._modifyEvent( event ); $( document ).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse this._mouseDown( event ); //return false; }, _touchMove: function( event ) { this._modifyEvent( event ); this._mouseMove( event ); }, _touchEnd: function( event ) { this.element .unbind( "touchmove." + this.widgetName ) .unbind( "touchend." + this.widgetName ); this._mouseUp( event ); }, _modifyEvent: function( event ) { event.which = 1; var target = event.originalEvent.targetTouches[0]; event.pageX = target.clientX; event.pageY = target.clientY; } }); })( jQuery ); 

本例中使用的touchFix插件的原作者是Oleg Slobodskoi 。

Answer 2

编辑：

在每次成功删除时，您可以将最后一个drop对象保存在draggable上。 因此，当draggable移动到另一个drop对象时，您可以启用前一个drop对象的droppable。

见下文：

尝试将handleDropEvent修改为：

 function handleDropEvent(event, ui) { if (ui.draggable.lastDropObject !== undefined) { ui.draggable.lastDropObject.droppable('enable'); } var dropObject = $(this); dropObject.droppable('disable'); ui.draggable.position({ of: $(this), my: 'left top', at: 'left top' }); ui.draggable.draggable('option', 'revert', "invalid"); ui.draggable.lastDropObject = dropObject; } 

基于源代码的完整工作示例：

                
 
  
 
 
Item 1
 
 
 
Item 2
 
 
 
Item 3
 
 
 
Item 4
 
 
 
Item 5
 
 
 
Item 6
 
 
 
Item 7
 
 
 
Item 8
 
 
 
Item 9
 
 
 
Item 10
 
 
 
 
 
 
 
 
 
 
 
 Check 
   

我希望这有帮助。

Answer 3

您“示例”链接看起来像正常工作。 但我想为您的问题提供通用的解决方案。

基本上你看下降区的状态。 当用户删除该项时，您检查dropzone是否可用。 如果没有设置“恢复”为真。

 function handleDropEvent (event, ui) { if ($(this).hasClass('occupied')) { ui.draggable.draggable('option', 'revert', true); return false; } $(this).append(ui.draggable); ui.draggable.position({of: $(this), my: 'left top', at: 'left top'}); ui.draggable.css('z-index', 0); setTimeout(validateDropzones, 0); } 

完整的工作示例如下： http ： //jsfiddle.net/jaygiri/SRPm2/

谢谢。

Answer 4

这是我得到的：

 $ (init); function init() { $(".dragzones").draggable({ start: handleDragStart, cursor: 'move', revert: 'invalid', opacity: .5, }); $(".dropzones").droppable({ drop: handleDropEvent, tolerance: "touch", out: handleDropRemove }); //prevents dragging to filled default droppables on start $(".dropzones").each(function(){ if ($(this).html().length) { $(this).addClass('taken'); } }); } function handleDragStart (event, ui) {} function handleDropRemove(event, ui) { //allows drop after removal $(this).removeClass('taken'); } function handleDropEvent (event, ui) { if ($(this).hasClass('taken')) { //rejects drop if full ui.draggable.draggable('option', 'revert', true); } else { //accepts drop if enpty ui.draggable.position({of: $(this), my: 'left top', at: 'left top'}); $(this).addClass('taken'); } } 

在这里工作演示

有几个问题我正在尝试排序。 如果光标在填充时光标到达放置区的最底部，则会调用out函数。 我似乎无法弄清楚如何防止这种情况。