我正在尝试建立一个网站，用户可以将一些项目(div中的一个项目)拖动到页面上的其他div。它不是一个桌子，只是在页面上的某个地方。
使用html5拖放功能很好，现在我尝试为移动设备这样做。我可以拖动项目到div，把它们放在那里并阻止这个dropzone，因为只有一个元素应该在一个dropzone中。我也可以拖动这个元素到另一个div或页面上的其他地方(可放置区域只能在第一次工作时，div被删除)如果我已经犯了一个错误，但我不能删除另一个项目在现在是空的再次。
如何才能再次启用Dropzone？
如果一个人被拖到另一个地方，是否有可能改变两个div的位置？
以下是我的代码的相关部分：
<script type="text/javascript">
$ (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");
}
</script>
<body>
<div id="alles">
<div class="dropzones" id="zone1"><div class="dragzones" id="drag1">Item 1</div></div>
<div class="dropzones" id="zone2"><div class="dragzones" id="drag2">Item 2</div></div>
<div class="dropzones" id="zone3"><div class="dragzones" id="drag3">Item 3</div></div>
<div class="dropzones" id="zone4"><div class="dragzones" id="drag4">Item 4</div></div>
<div class="dropzones" id="zone11"></div>
<div class="dropzones" id="zone12"></div>
<div class="dropzones" id="zone13"></div>
<div class="dropzones" id="zone14"></div>
</div>
</body>
编辑：
这是现在的工作页面：Drag&Drop Task
解决方法
这是一个工作示例：
http://jsfiddle.net/Gajotres/zeXuM/
我认为你们所有的问题都在这里得到解决。
>启用/禁用丢弃作品
返回的元素不再将它们下降到其他元素之下
>元素返回不再隐藏/删除它们
更好的元素定位(看起来更好)
>它适用于移动设备(在Android 4.1.1 Chrome和iPhone上测试)
这是一个jQuery代码：
$(document).on('pageshow','#index',function(){
$(".dragzones").draggable({
start: handleDragStart,});
});
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),"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,"_touchMove" ) )
.bind( "touchend." + this.widgetName,"_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。
