用jquery改变div的位置拖动一滴

我正在尝试建立一个网站，用户可以将一些项目(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。

用jquery改变div的位置拖动一滴

解决方法

相关文章