ansaurus

Question

jQuery Drag and Drop UI Limit Container Hover 1 IMG

Answer 1

A:

Crude but simple:

I also assumed that you want to let them rearrange and override their choices. So I added cloning of the original element.

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

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

Phil 2009-11-17 17:18:12

Thanks! Although that's not exactly what I am looking for, as I would still have to show which photos were used from the class="allshirts". I was hoping to remove each shirt as it was used, so each photo is not duplicated, but shown once and limited to once on the screen. I am pretty sure I can use the ($this)droppable('disable') but I know I am missing something.

John 2009-11-17 17:35:47

To remove the image once dropped replace: $(ui.draggable).clone() with just your original ui.draggable.

Phil 2009-11-18 17:00:31

ansaurus

tags:

views:

answers:

jQuery Drag and Drop UI Limit Container Hover 1 IMG

related questions