改变的div的位置与jQuery拖动的下降(Change position of divs with

2019-07-21 08:09发布

站内文章 / 后端开发
14 0 0

我想建立一个网站，用户可以拖动页面上的某些项（在DIV一个项目）到其他的div。 这不是一个表或如此，只是某个地方的div在页面上。

随着HTML5拖放效果很好，现在我试图为移动设备做到这一点。 我可以将项目来申报单，把它们那里，阻断这种悬浮窗，因为只有一个元素应该是在一个悬浮窗。 我还可以在页面上这个元素拖动到另一个股利或其他地方（可投放区域只在第一次运行一个div被丢弃），如果我已经犯了一个错误，但我就不能在现在是空的股利下降的另一个项目再次。

我怎样才能使此悬浮窗再次下探？

而且是有可能两个转变两个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>

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

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插件的原作者是奥列格斯洛博茨科伊 。



Answer 2:

编辑：

在每个成功的下降可以节省可拖动的最后一滴对象。 因此，当可拖动移动到另一个物体跌落您可以启用可放开以前下降的对象。

见下文：

尝试修改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;
}

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
        <title>Drag & Drop with jQuery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="title" content="" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link href="http://www.didaktik.physik.uni-muenchen.de/forschung/elektronenbahnen/Betaversion/Tests/Styletest.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://www.didaktik.physik.uni-muenchen.de/forschung/elektronenbahnen/Betaversion/Tests/../Alle Seiten/JS/jquery.js"></script>
        <script type="text/javascript" src="http://www.didaktik.physik.uni-muenchen.de/forschung/elektronenbahnen/Betaversion/Tests/../Alle Seiten/JS/jquery-ui-1.8.23.custom.min.js"></script>
        <script type="text/javascript" src="http://www.didaktik.physik.uni-muenchen.de/forschung/elektronenbahnen/Betaversion/Tests/../Alle Seiten/JS/jquery.ui.touch-punch.min.js"></script>
        <script type="text/javascript">
            var test;
            $(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) {
                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;
            }



            function check() {
                var i = 1;
                var richtige = 0;
                while (i <= 10) {
                    var j = i + 10;
                    if (document.getElementById('zone' + j)
                        .innerHTML.search('drag' + i + '"') == 27) {
                        document.getElementById('zone' + j)
                            .style.border = '2px solid green';
                        richtige++;
                    } else {
                        document.getElementById('zone' + j)
                            .style.border = '2px solid red';
                    }
                    i++;
                    alert(document.getElementById(zone + j)
                        .innerHTML);
                };
            }
        </script>
    </head>

    <body>
        <div id="alles">
            <div id="hintergrundbildZuordnungsaufgaben">
                <img src="http://www.didaktik.physik.uni-muenchen.de/forschung/elektronenbahnen/Betaversion/Tests/../E-Feld/Bilder/Versuchsaufbau-Elektronenablenkroehre-unbeschriftet.png" width="740">
            </div>
            <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="zone5">
                <div class="dragzones" id="drag5">Item 5</div>
            </div>
            <div class="dropzones" id="zone6">
                <div class="dragzones" id="drag6">Item 6</div>
            </div>
            <div class="dropzones" id="zone7">
                <div class="dragzones" id="drag7">Item 7</div>
            </div>
            <div class="dropzones" id="zone8">
                <div class="dragzones" id="drag8">Item 8</div>
            </div>
            <div class="dropzones" id="zone9">
                <div class="dragzones" id="drag9">Item 9</div>
            </div>
            <div class="dropzones" id="zone10">
                <div class="dragzones" id="drag10">Item 10</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 class="dropzones" id="zone15"></div>
            <div class="dropzones" id="zone16"></div>
            <div class="dropzones" id="zone17"></div>
            <div class="dropzones" id="zone18"></div>
            <div class="dropzones" id="zone19"></div>
            <div class="dropzones" id="zone20"></div>
            <button id="check" value="Check" onclick="check()">Check</button>
        </div>
    </body>

</html>

我希望这有帮助。



Answer 3:

你“示例”链接看起来正常工作。 但我想给通用解决您的问题。

基本上你看悬浮窗的状态。 当用户删除的项目，你是否悬浮窗是否可用。 如果没有设置“恢复”真。 

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

工作演示在这里

还有我想排序还是一对夫妇的问题。 如果鼠标移到当它被填充拖放区的最底部看来，出函数被调用。 我似乎无法弄清楚如何防止。



文章来源: Change position of divs with jquery drag an drop
标签： jquery html5 jquery-mobile drag-and-drop draggable
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~