Question

我这里的代码并不陌生，但这是我关于SO的第一个问题，所以如果我的礼仪不在此，请原谅我一次。我已经四处寻找支持，看起来很多人都没有遇到这个问题。

我正在使用jQuery-UI来处理拖放元素，并且在大多数情况下它工作得很好。但是，当我从“标签”中拖出某些内容时分成一个可放置的区域，它在它下面跳了几百个像素。它特别奇怪，因为我已经将它设置为恢复它在无效掉落上的位置，并且它正在工作，但它忽略了第一个掉落的规则，使其跳转。我不确定这是CSS位置样式中的内容，还是我没有正确设置我的UI属性。

http://www.putoutsystems.com/jtest/

点击耗材标签＆gt;将项目拖入垃圾箱。你应该看到我描述的行为。我使用的是jQuery 1.10.2和jQuery UI 1.10.4

这是该应用的所有代码：

<link href="css/pepper-grinder/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<style>
    #potion { width: 24px; height: 24px; position:relative;}

    #tabs { width: 500px; height: 100px;}

    #droppable { width: 500px; height: 100px;}

    .inventoryTab { height: 40px; }
</style>
<!-- libraries -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
<!--functions -->
<script>

    //functions
    $(function() {
        //Dragable Elements
        $( ".draggable" ).draggable({ revert: "invalid"});

        //Hover Text
         $( document ).tooltip();

        //droppable elements
         $( "#droppable" ).droppable({
              drop: function( event, ui ) {

                $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                    .html( "FULL!" );
                $(ui.draggable).appendTo($(this));
              }
            });

        //Tab Interface
        $( "#tabs" ).tabs();
    });

</script>
</head>
<body>

    <!-- Inventory tabs-->
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Equipment</a></li>
            <li><a href="#tabs-2">Consumables</a></li>
            <li><a href="#tabs-3">Items</a></li>
        </ul>
        <div id="tabs-1" class="inventoryTab" >

        </div>
        <div id="tabs-2" class="inventoryTab" >
            <div id="potion" class="draggable">
                <img src="sprites/potion.png" alt="potion"     title="Minor Health Potion">
            </div>
        </div>
        <div id="tabs-3" class="inventoryTab" >

        </div>

    </div>  

    <br>
    <!-- The Bin --->
    <h1>The BIN</h1>
    <div id="droppable" class="ui-widget-header">
        <p>Empty!</p>
    </div>

更新：我已经提出了一个设置精确位置的bandaid解决方案，我想我可以根据bin中有多少个对象使用变量进行更改。检查我们的代码是否有可放置事件：

//droppable elements
     $( "#droppable" ).droppable({
          drop: function( event, ui ) {

            $( this )
              .addClass( "ui-state-highlight" )
              .find( "p" )
                .html( "FULL!" );
            $(ui.draggable).appendTo($(this));
            $(ui.draggable).css({
                 'top': '10px',
                 'left': '10px'
            });
          }
        });

如果对象在被删除时获得鼠标位置，我更喜欢它，但是现在我的jQuery失败了。我一直在寻找。

JSFIDDLE

Answer 1

您似乎不需要此行$(ui.draggable).appendTo($(this));

//functions
$(function () {
    //Dragable Elements
    $(".draggable").draggable({
        revert: "invalid"
    });

    //Hover Text
    $(document).tooltip();

    //droppable elements
    $("#droppable").droppable({
        drop: function (event, ui) {

            $(this)
                .addClass("ui-state-highlight")
                .find("p")
                .html("FULL!");
            //$(ui.draggable).appendTo($(this)); // comment this out
        }
    });

    //Tab Interface
    $("#tabs").tabs();
});

<强> JSFIDDLE DEMO

jQuery-UI draggable / droppable Jumping

1 个答案: