CODEWITHSUNDEEP
javascriptjquery
bharath
bharath

Reputation: 885

drag and drop not working properly

I am new to javascript . Below is my html for drag and drop. revert not working properly. Please help me why its not working properly.

Revert works properly before drop but not return to original position

        <!DOCTYPE html>
    <html  ng-app="first22">
        <head>
            <link rel="icon" type="image/png" href="globe/images/correct.png"/>
            <link rel="stylesheet" type="text/css" href="globe/css/style.css"/>     
            <script type="text/javascript" src="globe/script/jquery.js"></script>
                <script type="text/javascript" src="globe/script/jquery-ui.js"></script>
            <title>
                Html5 All in One
            </title>
            <style>
                *{padding:0;margin:0}
                #interactive
                {
                    position:absolute;
                    width:895px;
                    height:695px;
                    margin:auto;
                    left:0;
                    right:0;
                    background:#f3f3f3;
                }

                .dragbg,.drop
                {
                    position:absolute;
                    width:171px;
                    height:52px;
                    background:#c0c0c0;
                    font-size:20px;
                    border-radius:25px;
                    text-align:center;
                }

                .drag
                {
                    width:160px;
                    height:40px;
                    background:#c2c2c2;
                    border:1px solid;
                    font-size:20px;
                    border-radius:25px;
                    text-align:center;
                    position:absolute;
                    margin-top:5px;
                    margin-left:5px;
                    line-height:40px;
                    cursor:pointer;
                }

                .drag:hover
                {
                    background:#fff;
                }
                .drop1
                {
                    width:160px;
                    height:40px;
                    background:#c2c2c2;
                    border:1px solid;
                    font-size:20px;
                    border-radius:25px;
                    text-align:center;
                    position:absolute;
                    top:5px;
                    left:5px;
                    line-height:40px;
                    cursor:pointer;
                }
            </style>
        </head>
        <body>
            <div id="interactive">
                <div style="position:absolute;left:0px;top:50px;width:100%;text-align:center;font-size:28px;font-weight:bold">Common Drag and Drop</div>

                <div class="dragbg" style="left:120px;top:150px;">
                     <div class="drag" >Meter</div>
                </div>
                <div class="dragbg" style="left:120px;top:220px;">
                     <div class="drag">MilliMeter</div>
                </div>
                <div class="dragbg" style="left:120px;top:290px;">
                     <div class="drag">CentiMeter</div>
                </div>
                <div class="dragbg" style="left:120px;top:360px;">
                     <div class="drag">Gram</div>
                </div>
                <div class="dragbg" style="left:120px;top:430px;">
                     <div class="drag">MilliGram</div>
                </div>
                <div class="dragbg" style="left:120px;top:500px;">
                     <div class="drag">KiloGram</div>
                </div>


                <div class="drop" style="left:320px;top:150px;">

                </div>             
                <div class="drop" style="left:320px;top:220px;">

                </div>             
                <div class="drop" style="left:320px;top:290px;">

                </div>             
                <div class="drop" style="left:320px;top:360px;">

                </div>             
                <div class="drop" style="left:320px;top:430px;">

                </div>             
                <div class="drop" style="left:320px;top:500px;">

                </div>

            </div>      
        </body>
        <script>
        $("document").ready(function()
        {
            $(".drag").draggable(
            {
                containment:"#interactive",
                revert:function(event,ui)
                {
                    $(this).data("uiDraggable").originalPosition=
                    {
                        left:0,
                        top:0
                    };
                    return !event;
                },
                zindex:1000,
                drag:function(event,ui)
                {
                    $(this).css("z-index",2000);
                }
            });

            $(".drop").droppable(
            {
                drop:function(event,ui)
                {
                    $(this).append(ui.draggable)
                    $(this).find(".drag").each(function()
                    {
                        $(this).css("position","absolute");
                        $(this).css({"top":"0px","left":"0px"});
                    });
                }
            });

        })          
        </script>
    </html>

Upvotes: 0

Views: 1933

Answers (2)

DC-
DC-

Reputation: 807

You are appending the drag to its place holder which changes the parent of the drag object. So it changes it relation to the new container. You just have to move the position of the drag keeping it to its parent container. Also you have to position the div relative to its container.

            $(".drop").droppable(
            {
                drop:function(event,ui)
                {
                    var pos = $(this).offset();
                    var ppos = $(ui.draggable).parent().offset();
                    var left = pos.left - ppos.left;
                    var top = pos.top - ppos.top;
                    $(ui.draggable).css({"left" : left, "top": top})
                    $(this).find(".drag").each(function()
                    {
                        $(this).css("position","absolute");
                        $(this).css({"top":"0px","left":"0px"});
                    });
                }
            });

Your fiddle updated http://jsfiddle.net/XSXA6/18/

Upvotes: 1

K K
K K

Reputation: 18109

I think this behaviour is because you are appending the draggable in the droppable and hence changing the position coordinates. You don't need to do anything in the droppable initialisation and it will work.

Demo: http://jsfiddle.net/XSXA6/15/

JS:

$(document).ready(function () {
    $(".drag").draggable({
        containment: "#interactive",
        revert: function (event, ui) {
            $(this).data("uiDraggable").originalPosition = {
                left: 0,
                top: 0
            };
            return !event;
        },
        zindex: 1000,
        drag: function (event, ui) {
            $(this).css("z-index", 2000);
        }
    });
    $(".drop").droppable({
    drop: function (event, ui) {
        console.log(ui.draggable, $(this));
        var d = $(this)
        $(ui.draggable).position({
            my: "center",
            at: "center",
            of: d
        });
      }
   });
  });

Upvotes: 0

Related Questions