スタイル設定されたインベントリを作成しました。.css にスタイルを追加したため、アイテムがインベントリに戻されると、既存のアイテムの下に移動してボックスが台無しになります。どうすればこれを修正できますか? (彼らは基本的に国境の1つから抜け出し、新しい国境に入ります)
注: 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>