使用 jquery 拖放更改 div 的位置 [英] Change position of divs with jquery drag an drop

查看：14
本文介绍了使用 jquery 拖放更改 div 的位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

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

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

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

<身体><div id="alles"><div class="dropzones" id="zone1"><div class="dragzones" id="drag1">项目 1</div></div><div class="dropzones" id="zone2"><div class="dragzones" id="drag2">项目 2</div></div><div class="dropzones" id="zone3"><div class="dragzones" id="drag3">项目 3</div></div><div class="dropzones" id="zone4"><div class="dragzones" id="drag4">项目 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>

这是现在的工作页面:Drag&删除任务

解决方案

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

我认为您的所有问题都在这里得到了解决.

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

这是使用的 jQuery 代码:

$(document).on('pageshow', '#index', function(){$(".dragzones").draggable({开始:handleDragStart，光标:'移动'，回复:无效"，});$(".dropzones").droppable({丢弃:handleDropEvent，宽容:触摸"，});});函数handleDragStart(事件，ui){}函数handleDropEvent(事件，ui){如果(ui.draggable.element ！== 未定义){ui.draggable.element.droppable('启用');}$(this).droppable('disable');ui.draggable.position({of: $(this),my: 'left top',at: 'left top'});ui.draggable.draggable('option', 'revert', "invalid");ui.draggable.element = $(this);}//这是针对移动设备的修复/iPad|iPhone|Android/.test( navigator.userAgent ) &&(功能($){var proto = $.ui.mouse.prototype,_mouseInit = proto._mouseInit;$.extend( 原型，{_mouseInit:函数(){this.element.bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );_mouseInit.apply( this, arguments );},_touchStart:函数(事件){this.element.bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) ).bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );this._modifyEvent(事件);$( 文档 ).trigger($.Event("mouseup"));//重置ui.mouse中的mouseHandled标志this._mouseDown(事件);//返回假；},_touchMove:函数(事件){this._modifyEvent(事件);this._mouseMove(事件);},_touchEnd:函数(事件){this.element.unbind( "touchmove." + this.widgetName ).unbind( "touchend." + this.widgetName );this._mouseUp(事件);},_modifyEvent:函数(事件){事件.which = 1;var target = event.originalEvent.targetTouches[0];event.pageX = target.clientX;event.pageY = target.clientY;}});})( jQuery );

本示例中使用的 touchFix 插件的原始作者是 Oleg Slobodskoi.

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.

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.

How can I enable dropping in this Dropzone again?

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>

EDIT: Here is the now working page: Drag&Drop Task

解决方案

Here's a working example: http://jsfiddle.net/Gajotres/zeXuM/

I think all of your problems are solved here.

  • enable/disable dropping works
  • elements returning no longer drops them below other elements
  • elements returning no longer hides/remove them
  • better elements positioning (it looks better)
  • it works on mobile devices (tested on Android 4.1.1 Chrome and iPhone)

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 );

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

这篇关于使用 jquery 拖放更改 div 的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆