jqueryui可拖动的可放置问题

Posted 2023-05-08

【中文标题】jqueryui可拖动的可放置问题

【英文标题】：jqueryui draggable droppable issue

【发布时间】：2012-05-19 17:45:03

【问题描述】：

我需要一些帮助来了解这有什么问题。

将项目拖放到可放置区域（模板位置）时，它会移动到另一个位置，然后再次尝试将其拖动到正确的位置时，它会移动得更远......

例如：我将苹果和香蕉都放到可掉落区域后，如果我将香蕉靠近苹果，它会粘在一起..

拖动项目的光标移动距离项目本身很远，假设我没有设置光标位置，它会出现在我要拖动项目时鼠标所在的位置，所以很奇怪......

只要将item从droppable区域移出，它就需要飞回draggable并整齐的显示在draggable区域（item list位置）。 但似乎一直锁定/不能整齐地飞回来

    <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>

        <style>

    #droppable 
            border:1px solid #000;
            font-weight:bold;
            background-color:#FFF;
            width: 300px;
            height: 400px;
            padding: 0.5em;
            float: left;
            margin: 10px;
        

    #draggable
        width:300px;
        float:left;
        border:1px solid #000;
        background-color:#E2EBED;
        padding:3px;
        height:500px;
    

    .dragableBox
        border:1px solid #000;
        background-color:#FFF;
        font-weight:bold;
        text-align:center;
        width:150px;
        height:auto;
        margin-bottom:5px;
        padding:3px;
    

    </style>

        <script type="text/javascript">

    $(function() 

                //draggable setting
        $( ".dragableBox" ).draggable(
                   revert: "invalid",
                   revertDuration: 1000,
                   cursor: "move",
                   delay: 200,
                   opacity: .45,
                   refreshPositions: true,
                   snap: true,
                   containment: "#droppable"
                   //helper: "clone"
                );

                //to allow item at droppable div go back to draggable div neatly.
        $( "#draggable" ).droppable(
                        accept: '.dragableBox',
            drop: function( event, ui ) 

                          var draggable = ui.draggable;

                                $("#draggable").append(ui.droppable);
            
        );

                //to append and show it out
        $( "#droppable" ).droppable(

                        accept: '.dragableBox',

            drop: function( event, ui ) 

                          var draggable = ui.draggable;

                          var html= 'Dropped!' + '<br>' +
                              'The square with ID "' + draggable.attr('id') + '" was dropped onto me!' + '<br>' +
                              'left:'+ ui.position.left + ' top:'+ ui.position.top;

              //ajax save actual position to db for later retrieval.

                                $("#droppable").append(ui.draggable);
            
        );
    );

    </script>




<div class="demo">

<div id="draggable" >
        <div class="dragableBox" id="box1">apple</div>
        <div class="dragableBox" id="box2">banana</div>
        <div class="dragableBox" id="box2">mango</div>
</div>

<div id="droppable" >

</div>

</div>

【问题讨论】：

在jsfilde.net中设置一个小提琴

【参考方案1】：

查看此演示：http://jsfiddle.net/pHJgP/5/

Jquery 代码

$(document).ready(function() 
    var currentParent;

        $("#draggable .dragableBox").draggable(
            cursor: "move",
            delay: 200,
            opacity: .45,
            refreshPositions: true,
            snap: true,
            revertDuration: 1000,     
            revert: 'invalid',
            start: function()
                currentParent = $(this).parent().attr('id');
            
        );

    $('#draggable, #droppable').droppable(
        accept:'.dragableBox',
        drop: function(event,ui)
            if (currentParent != $(this).attr('id'))
              $(ui.draggable).addClass( "ui-state-highlight" );
            
        
    );



);

HTML 代码

<div class="demo">

<div id="draggable" >
        <div class="dragableBox" id="box1">apple</div>
        <div class="dragableBox" id="box2">banana</div>
        <div class="dragableBox" id="box2">mango</div>
</div>

<div id="droppable" >

你的风格

#droppable 
            border:1px solid #000;
            font-weight:bold;
            background-color:#FFF;
            width: 300px;
            height: 200px;
            padding: 0.5em;
            float: left;
            margin: 10px;
        

    #draggable
        width:300px;
        float:left;
        border:1px solid #000;
        background-color:#E2EBED;
        padding:3px;
        height:200px;
    

    .dragableBox
        border:1px solid #000;
        background-color:#FFF;
        font-weight:bold;
        text-align:center;
        width:150px;
        height:auto;
        margin-bottom:5px;
        padding:3px;
    

【讨论】：

嗨 RV，我怎样才能使项目能够移动到 div id="droppable 内的任何位置？

【参考方案2】：

你好检查这个 jsfiddle 链接

http://jsfiddle.net/BbSLy/21/

希望这是您正在寻找的解决方案 谢谢

【讨论】：

奇怪，我只是检查了你的代码，它看起来几乎一样。然后我去尝试它，发现它在 Firefox 中有效，但在 chrome 中与我上面提到的完全相同的问题......

在您的解决方案中，还要检查首先加载的 jquery 插件或 ui。您必须先加载 jquery，然后 jqueryui 可能是您的解决方案中可能出现的问题。所以检查哪个js首先加载的firebug。