1

我创建了一个样式化的库存，并且由于我在 .css 中添加了样式，因此当将物品放回库存时，它们会低于现有物品并破坏我的盒子。我怎样才能解决这个问题？（他们基本上会退出其中一个边界并进入一个新边界）

http://jsfiddle.net/BxPjC/

注意：删除 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>
4

2 回答 2

1

在您的 JS 中更改.inventholding为#itembox4

http://jsfiddle.net/tzDXq/

于 2013-04-17T09:32:30.880 回答
0

http://jsfiddle.net/hWabw/

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

我删除了项目框，现在它似乎可以工作了。

另一种方法是将最后一个项目框作为放置的目标。不是周围的容器。

于 2013-04-17T09:24:31.847 回答