Question

这是我的小提琴：http://jsfiddle.net/stmohan/k42HM/

我已经尝试了拖放的示例。它在小提琴中工作得很好但是当我试图实现drop不起作用时，这是我的代码..

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

当我运行此代码时，只有拖动才会降低工作量。请帮帮我。

当我运行代码http://jsfiddle.net/stmohan/k42HM/show/时，小提琴也不起作用..

Answer 1

您正在尝试删除block元素。它的宽度默认为容器的100％。

如果您将可拖动的块设置为display:inline-block;或明确定义它们的宽度，它将起作用：）

您可以在此处看到我更新的小提琴，它会向您显示非inline-block和block元素的大小之间的差异：http://jsfiddle.net/k42HM/3/

Jquery Droppable无法正常工作

1 个答案: