Question

我正在尝试构建一个基本的拖放打印友好的照片库。我希望允许用户拍摄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>

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

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

1 个答案: