使用jquery拖放更改div的位置

2022-01-11 00:00:00 drag-and-drop draggable jquery html jquery-mobile

我正在尝试构建一个网站，用户可以在其中将一些项目(div 中的一个项目)拖动到页面上的其他 div.它不是表格左右，只是页面某处的 div.

I'm trying to build a website where the user can drag some items (one item in on div) to other divs on the page. It' not a table or so, just divs somewhere on the page.

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

With html5 drag&drop it works well, now I try to do this for mobile devices. I can drag items to divs, drop them there and block this dropzone, because only one element should be in a dropzone. I also can drag this element to another div or somewhere else on the page (droppable areas only work on first time a div is dropped) if I've had make a mistake but then I cannot drop another item in the div which is now empty again.

如何才能再次启用在此 Dropzone 中的放置?

How can I enable dropping in this Dropzone again?

如果一个被拖到另一个上，是否可以同时改变两个 div 的位置?

And is it possible to two change the position of two divs if one is dragged on another?

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

Here is the relevant part of my code:

<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&删除任务

Here is the now working page: Drag&Drop Task

推荐答案

这是一个工作示例:http://jsfiddle.net/Gajotres/zeXuM/

我想你所有的问题都在这里解决了.

I think all of your problems are solved here.

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

这是使用的 jQuery 代码:

Here's a jQuery code used:

$(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.

Original author of a touchFix plugin used in this example is Oleg Slobodskoi.

相关文章