Jquery Droppable not working

StackOverflow https://stackoverflow.com/questions/22704065

سؤال

HI this is my fiddle: http://jsfiddle.net/stmohan/k42HM/

in which i have tried an example for drag and drop. it works fine in fiddle but when i tried to implement drop is not working here is my code..

<!DOCTYPE html>

<html>
    <head>
        <title>Example1</title>

        <script type="text/javascript" src="./js/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="./js/jquery-ui-1.10.4.custom.js"></script>
        <script type="text/javascript" src="./js/jquery-ui-1.10.4.custom.min.js"></script>

        <link rel="stylesheet" type="text/css" href="./css/jquery-ui.css">

        <style type="text/css">
            #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
            #div2 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
            #div3 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
        </style>

        <script type="text/javascript">
            $(window).load(function(){
            $(function () {

                 $(".draggable").draggable({
                    snap: ".snapTarget",
                    snapMode: "inner",
                    snapTolerance: 20,
                    revert: "invalid"
                });  

                $(".word1 .wordBg").draggable({
                    snapTolerance: 20,
                    revert: "invalid",
                });
                $(".word1").droppable({
                    accept: ".word1"
                });

                $(".word2 .wordBg").draggable({
                    snapTolerance: 20,
                    revert: "invalid",
                });
                $(".word2").droppable({
                    accept: ".word2"
                });

                $(".word3 .wordBg").draggable({
                    snapTolerance: 20,
                    revert: "invalid",
                });
                $(".word3").droppable({
                    accept: ".word3"
                });

            });
            });  
        </script>
    </head>

    <body>
        <p>Drag the W3Schools image into the rectangle:</p>

        <div id="div1" class="wordBg word1 snapTarget snap1 "></div> <br>
        <div id="div2" class="wordBg word2 snapTarget snap2 "></div> <br>
        <div id="div3" class="wordBg word3 snapTarget snap3 "></div> <br>

        <div class="draggable word1" style="position: relative;"> <img src="./img/img_logo.gif"> </div>
        <div class="draggable word2" style="position: relative;"> <img src="./img/img_logo.gif"> </div>
        <div class="draggable word3" style="position: relative;"> <img src="./img/img_logo.gif"> </div>
    </body>
</html>

when i run this code only drag is wroking drop is not working. please help me out.

in fiddle when i run the code http://jsfiddle.net/stmohan/k42HM/show/ then also drop is not working..

هل كانت مفيدة؟

المحلول

you are trying to drop a block element. it's width defaults to 100% of the container.

if you either set the draggable blocks to display:inline-block; or explicitly define their width it'll work :)

you can see my updated fiddle here that shows you the difference between the size of the non-inline-block and the block elements: http://jsfiddle.net/k42HM/3/

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top