jQuery-UI draggable/droppable Jumping

Question

I'm not new to code here, but this is my first question on SO, so if my etiquette is off excuse me just this once. I've looked around for support on this, and it doesn't seem many people are running into this problem.

I'm playing with jQuery-UI for the dragging and dropping elements, and for the most part it's working fine. However when I drag something from a 'tabbed' div into a droppable area it jumps a couple hundred pixels below it. It's especially odd because I've got it set to revert it's position on an invalid drop, and that's working, but it ignores this rule on the first drop that makes it jump. I'm not sure if this is something in the CSS position style, or if I'm not setting my UI attributes correctly.

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

Hit the consumables tab > drag the item into the bin. You should see the behavior I'm describing. I'm using jQuery 1.10.2 and jQuery UI 1.10.4

This is all the code for the app:

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

UPDATE: I've come up with a bandaid solution that sets an exact position, that I suppose I could change using variables based on how many objects are in the bin. Check our this code for droppable event:

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

I'd prefer it if the object got the mouse position when it was dropped, but that's where my jQuery is failing me right now. I'll keep looking.

JSFIDDLE

Answer 1

It seems like you don't need this line $(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

Question

1 answers

solution1
0 2014-04-30 14:08:31

jQuery-UI draggable/droppable Jumping

Question

1 answers

solution1 0 2014-04-30 14:08:31

solution1
0 2014-04-30 14:08:31