CODEWITHSUNDEEP
jqueryjquery-uieventsdrag-and-drop
SouthCoaster
SouthCoaster

Reputation: 51

Drop event not firing in jQuery UI.

I am trying to create a small program that allows a user to put pieces of equipment together to construct a picture of a device. the end product will look and function like this: http://oliverdjones.com/learning/nebulizer.swf

here's the current version: http://oliverdjones.com/learning/dragtester.html

I am using jQuery UI. The drag events are working as expected but I have not yet been able to make the drop event fire and I am completely out of ideas. Here's the code: 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>drag test</title>

    <style>
            .content {width:100%; height:100%;position: absolute;}
        #draggable img {width:100%}
        .part1 {position:absolute;width:100px; z-index: 5; margin-top:15%; margin-left:57%;}
        .drop1 {position:absolute;width:100px; height: 70px; z-index: 3; background-color:rgba(255,0,0,0.5);top:42%; left:45%; }
        .dropped1 {position:absolute;width:100px; height: 70px; z-index: 3; background-color:rgba(255,255,255,0.5);top:42%; left:45%;}
        .base {position:absolute; width: 17%; top:45%; left:42%;z-index: 2}
        .status {position:absolute; width: 160px; border:#000 solid 2px; text-align:center; -webkit-border-radius: 12px; border-radius: 12px; color:#000; font-family: Arial, Helvetica, sans-serif; top:85%; left:30%; z-index:3}

    </style>

    <script src="js/jqueryui/js/jquery-1.7.2.min.js"></script>
    <script src="js/jqueryui/js/jquery-ui-1.8.20.custom.min.js"></script>
    <script src="js/jqueryui/js/jquery.ui.touch-punch.min.js"></script>

    <script>
    $(function() {
        $( '#draggable' ).draggable({
        containment: '#content',
        drag: function(event, ui){
            $('.status')
            .addClass('ui-state-highlight')
            .find('p')
                 .html('&nbsp;');
            }
        });


            $( '#droppable' ).droppable({
                accept: '#draggable',
                drop: function( event, ui ) {
                    $.this.css({'background':'white'});
                    $('.status')
                    .addClass('ui-state-highlight')
                        .find('p')
                            .html('Good!');
                             }
                    });
            });
    </script>

</head>

<body>
    <div class="content">

      <img class="base"src="images/base.png" />

      <div id="draggable" class="ui-widget-content part1">
        <img src="images/part1.png" />
      </div>

      <div id="droppable" class="ui-widget-header drop1">
        <div></div>
      </div>

      <div. class="status">
        <p>Please Assemble</p>
      </div>

     </div><!-- /content -->

</body>

Upvotes: 3

Views: 2244

Answers (1)

TJ VanToll
TJ VanToll

Reputation: 12704

This is being caused by the margin applied to the draggable node. If you remove these CSS declarations this should work as expected.

 .part1 { margin-top:15%; margin-left:57%; }

This is a known jQuery UI bug, see http://bugs.jqueryui.com/ticket/6876.

Upvotes: 2

Related Questions