jQuery拖放UI限制容器悬停1 IMG答案

【问题标题】：jQuery Drag and Drop UI Limit Container Hover 1 IMGjQuery拖放UI限制容器悬停1 IMG
【发布时间】：2009-11-17 17:11:23
【问题描述】：

我正在尝试构建一个基本的拖放打印友好型照片库。我想让用户拍 10 张照片，随意排列，然后打印出来。下面的代码执行基本的拖放操作，将照片/img 放入 div，但我不能将 div 限制为仅接受 1 张照片。

我该如何解决它，以便当 img 悬停在带有图像的 div 上时，它不允许放置。我尝试了禁用功能，但是如果您取消注释它，当一个项目被丢弃并再次移动时，没有任何东西可以回到那个位置。启用功能不能解决这个问题。

请帮忙:(

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
        var count = 0;
      $(".shirts").draggable({helper: 'clone'});
      $(".drop").droppable({
        accept: ".shirts",
        activeClass: 'droppable-active',
        hoverClass: 'droppable-hover',
            drop: function(ev, ui) {
              $(this).append(ui.draggable);     
    //          $(this).droppable('disable'); 
    //          $(this).droppable('enable'); 
            }
      });
    });
            </script>
        <style type="text/css">
        .drop{width:100px;min-height:109px;float:left;}
        .allshirts{width:100%;border:1px solid #eee;min-height:140px;}
        .shirts{float:left;width:100px;}
        .blanket{width:510px;min-height:140px;margin:0px;padding:0px;}
        .droppable-hover{background:#000;}
        .clear{clear:both;}
        </style>

</head>
<body>
    <div class="allshirts drop">
        <img class="shirts" src="images/tshirt_thumb1_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb2_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb3_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb4_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb1_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb2_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb3_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb4_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb1_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb2_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb3_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb4_thumb.png" />
    </div>
    <div class="clear"></div>
    <div class="blanket">
        <table cellpadding="0" cellspacing="0" border="1">
                <td><div id="photo1" class="drop"></div></td>
                <td><div id="photo2" class="drop"></div></td>
                <td><div id="photo3" class="drop"></div></td>
                <td><div id="photo4" class="drop"></div></td>
                <td><div id="photo5" class="drop"></div></td>
            </tr>
            <tr>
                <td><div id="photo6" class="drop"></div></td>
                <td><div id="photo7" class="drop"></div></td>
                <td><div id="photo8" class="drop"></div></td>
                <td><div id="photo9" class="drop"></div></td>
                <td><div id="photo10" class="drop"></div></td>
            </tr>

        </table>
    </div>

</body>
</html>

【问题讨论】：

标签： jquery jquery-ui drag-and-drop

【解决方案1】：

粗略但简单：

我还假设您想让他们重新排列并覆盖他们的选择。所以我添加了对原始元素的克隆。

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
        var count = 0;
      $(".shirts").draggable({helper: 'clone'});
      $(".drop").droppable({
        accept: ".shirts",
        activeClass: 'droppable-active',
        hoverClass: 'droppable-hover',
                drop: function(ev, ui) {
        if ($(this).html() == ""){
                  $(this).append($(ui.draggable).clone());         
        }else{
           $(this).empty().append($(ui.draggable).clone());
        }
                }
      });
    });
                </script>
        <style type="text/css">
        .drop{width:100px;min-height:109px;float:left;}
        .allshirts{width:100%;border:1px solid #eee;min-height:140px;}
        .shirts{float:left;width:100px;}
        .blanket{width:510px;min-height:140px;margin:0px;padding:0px;}
        .droppable-hover{background:#000;}
        .clear{clear:both;}
        </style>

</head>
<body>
    <div class="allshirts drop">
        <img class="shirts" src="images/tshirt_thumb1_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb2_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb3_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb4_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb1_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb2_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb3_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb4_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb1_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb2_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb3_thumb.png" />
        <img class="shirts" src="images/tshirt_thumb4_thumb.png" />
    </div>
    <div class="clear"></div>
    <div class="blanket">
        <table cellpadding="0" cellspacing="0" border="1">
                        <td><div id="photo1" class="drop"></div></td>
                        <td><div id="photo2" class="drop"></div></td>
                        <td><div id="photo3" class="drop"></div></td>
                        <td><div id="photo4" class="drop"></div></td>
                        <td><div id="photo5" class="drop"></div></td>
                </tr>
                <tr>
                        <td><div id="photo6" class="drop"></div></td>
                        <td><div id="photo7" class="drop"></div></td>
                        <td><div id="photo8" class="drop"></div></td>
                        <td><div id="photo9" class="drop"></div></td>
                        <td><div id="photo10" class="drop"></div></td>
                </tr>

        </table>
    </div>

</body>
</html>

【讨论】：

谢谢！尽管这不是我要找的，因为我仍然需要显示 class="allshirts" 中使用了哪些照片。我希望在使用时将每件衬衫移除，因此每张照片都不会重复，而是显示一次并且仅限于在屏幕上显示一次。我很确定我可以使用 ($this)droppable('disable') 但我知道我错过了一些东西。
删除图像一旦被删除替换： $(ui.draggable).clone() 只用你原来的 ui.draggable。