jQuery-UI 可拖动/可放置跳跃答案

【问题标题】：jQuery-UI draggable/droppable JumpingjQuery-UI 可拖动/可放置跳跃
【发布时间】：2014-06-16 19:55:27
【问题描述】：

我对这里的编码并不陌生，但这是我关于 SO 的第一个问题，所以如果我的礼仪不妥，请原谅我一次。我在这方面四处寻找支持，似乎没有多少人遇到这个问题。

我正在使用 jQuery-UI 来拖放元素，并且在大多数情况下它工作正常。但是，当我将某些内容从“选项卡式”div 拖到可放置区域时，它会在其下方跳跃几百像素。这特别奇怪，因为我已经将它设置为在无效的下降上恢复它的位置，这是有效的，但它在第一次下降时忽略了这条规则，使它跳跃。我不确定这是否是 CSS 位置样式中的内容，或者我没有正确设置我的 UI 属性。

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

点击消耗品标签 > 将物品拖入垃圾箱。你应该看到我描述的行为。我正在使用 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>

更新：我想出了一个可设置精确位置的创可贴解决方案，我想我可以根据垃圾箱中有多少对象使用变量来更改它。检查我们的此代码是否有可放置事件：

//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

【问题讨论】：

stlye正在使用js动态添加，检查它或用JS代码更新问题，我看到div id=potion有top=160px，如果我删除它，位置就完美了。
@Dave，非常简单的问题。谢谢你。现在我只需要弄清楚如何抵消这种影响。顶部和左侧样式是根据它的父级设置的，但它的父级在“appentTo”函数期间会发生变化。我可能需要一段时间才能弄清楚如何缓解这种情况，所以任何人都可以随意加入。
您是否要进入 bin div？如果是这样，请参阅下面的答案

标签： javascript jquery css jquery-ui drag-and-drop

【解决方案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

【讨论】：

@dccodesmith，我稍后可能会在应用程序的某些函数中使用父属性。但更重要的是尝试更改您的小提琴中的标签。该对象仅在其父选项卡可见时出现。