Question

我创建了一个样式的库存，因为我在.css中添加了样式，当项目被放回到库存中时，它们会移到现有项目下方并破坏我的盒子。我怎样才能解决这个问题？ （他们基本上退出其中一个边界并进入新的边界）

注意：删除itembox1，itembox3和itembox4似乎解决了它但是我失去了造型。我可以用什么来替换用于样式的div。

function itemInSpot(drag_item,spot)
{
var oldSpotItem = $(spot).find('img');
if(oldSpotItem.length>100) {
oldSpotItem.appendTo('.inventholding').draggable({ revert: 'invalid' });
}
var item = $('<img />');
item.attr('src',drag_item.attr('src')).attr('class',drag_item.attr('class')).appendTo(spot)    .draggable({ revert: 'invalid' });
drag_item.remove(); // remove the old object
}

 $(document).ready(function() {
  $("img").draggable({ revert: 'invalid'});

$(".inventholding").droppable()
$("#pricebox").droppable({ accept: '.price'})
$('#pricebox').droppable({ accept: '.price'});
$('#pricebox,#pricebox,.inventholding').bind('drop', function(ev,ui) {      itemInSpot(ui.draggable,this); });

$('#clone_button').click(function() {
    $('#clone_wrapper div:#pricebox')
        .clone()
    .append('')
    .appendTo($('#clone_wrapper'));
})
});

<div id="container">

<body>
    <div id="clone_wrapper">
        <div class="right">
            <div id="pricebox" style="background: none; width:153px; padding:1px; height:auto; margin 1px; border:1px solid black; 
float:left;">
                <select name="qty">
                    <option value="Each" selected>Each</option>
                    <option value="All"> All</option>
                    <option value="Any 2">Any 2</option>
                    <option value="Any 3">Any 3</option>
                </select>
                <input id="coin" type="text" id="text" name="text_name" style="width: 35px; style=" height: 21px; " maxlength=3 /></h6></div>
</div></div>

<button id="clone_button ">New</button></div>
<div id='inventrightside1'><div id='inventrightside2'><p1><img     src="http://kennenmen.netai.net/images/invent1.png "/></p>

<div class="inventholding " clear:both;">
                <div id="itembox1">
                    <div id="itembox3">
                        <div id="itembox4">
                            <img src="http://images.lasuni.com/icons/lionhat_red.png"   class="price" alt="" />
                            <img src="http://images.lasuni.com/icons/duckring_pink.png" class="price" alt="" />
                            <img src="http://images.lasuni.com/icons/cowboyhat_gold.png" class="price" alt="" />
                            <img src="http://images.lasuni.com/icons/halo_pink.png" class="price" alt="" />
                            <img src="http://images.lasuni.com/icons/cakehat_strawberry.png" class="price" alt="" />
                            <img src="http://images.lasuni.com/icons/ninjaeyemask_pink.png" class="price" alt="" />
                            <img src="http://images.lasuni.com/icons/carnivalmask_blue.png" class="price" alt="" />
                            <img src="http://images.lasuni.com/icons/alienhead_purple.png" class="price" alt="" />
                            <img src="http://images.lasuni.com/icons/skullhead_white.png" class="price" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>
</div>

Answer 1

在您的JS更改.inventholding到#itembox4

http://jsfiddle.net/tzDXq/

Answer 2

http://jsfiddle.net/hWabw/

            <div id="itembox1">
               <div id="itembox3">
                  <div id="itembox4">
                    ...
                  </div>
               </div>
            </div>

我删除了itemboxes，现在它似乎有效。

另一种方法是使最后一个itembox成为drop的目标。不是周围的容器。

Droppable不会纠正现场

2 个答案: