Jquery Droppable不工作答案

【问题标题】：Jquery Droppable not workingJquery Droppable不工作
【发布时间】：2014-05-07 09:32:19
【问题描述】：

嗨，这是我的小提琴：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>

当我运行此代码时，只有拖动正在工作 drop 不起作用。请帮帮我。

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

【问题讨论】：

是的，它在小提琴中工作，但当我尝试在我的系统中使用代码时不起作用，我已经包含了所有需要的 js 文件，只有拖动才能工作。 jsfiddle.net/stmohan/k42HM/show 请试试这个.. 放弃不工作
删除多余的draggable events。见jsbin.com/ciyecugu/1

标签： jquery html drag-and-drop jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

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

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

你可以在这里看到我更新的小提琴，它向你展示了非inline-block 和block 元素的大小之间的差异：http://jsfiddle.net/k42HM/3/

【讨论】：

@ haxxxton 我需要另一个帮助，如果正确的图像放置在正确的盒子中，我需要播放声音，而当图像放置在错误的盒子中时，我需要播放另一个声音.. 给我一些建议或任何帮助..
jsfiddle.net/k42HM/4 应该让您开始了解成功与不成功的触发......至于用声音做事。查看stackoverflow.com/a/15955794/648350 了解使用 javascript 播放声音的解决方案（注意跨浏览器媒体格式的限制）