示例 http://jsfiddle.net/7DeFn/1
<div id="container">
<body>
<div id="clone_wrapper">
<div class="right">
<div id="pricebox1">
<div id="pricebox2">
<input id="coin" type="text" id="text" name="text_name" style="width: 35px; style=" height: 21px; maxlength=3 />
<div id="selectbox1">
<div id="selectbox2">
<div id="selectbox3">
<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>
</div>
</div>
</div>
<div id="pricebox3">
<div id="pricebox4">
<div id="pricebox5"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="clone_wrapper">
<div class="right">
<div id="pricebox1">
<div id="pricebox2">
<input id="coin" type="text" id="text" name="text_name" style="width: 35px; style=" height: 21px; maxlength=3 />
<div id="selectbox1">
<div id="selectbox2">
<div id="selectbox3">
<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>
</div>
</div>
</div>
<div id="pricebox3">
<div id="pricebox4">
<div id="pricebox5"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id='inventrightside1'><div id='inventrightside2'><p1><img src="images/invent1.png "/></p>
<select id="filter"><option>Select Item</option>
<option value="glasses" />Glasses<br />
<option value="afro" />Afros<br />
<option value="alien" />Alien<br />
<option value="antler" />Antlers<br />
<option value="army" />Army<br />
</select>
<div class="inventholding">
<div id="itembox1">
<div id="itembox3">
<div id="itembox4">
<img src="images/3dglasses_black.png" class="glasses" id="price" alt="Black 3D Glasses" />
<img src="images/3dglasses_white.png" class="glasses" id="price" alt="White 3D Glasses" />
<img src="images/afro_black.png" class="afro" id="price" alt="Black Afro" />
<img src="images/afro_blue.png" class="afro" id="price" alt="Blue Afro" />
<img src="images/afro_green.png" class="afro" id="price" alt="Green Afro" />
<img src="images/afro_orange.png" class="afro" id="price" alt="Orange Afro" />
<img src="images/afro_pink.png" class="afro" id="price" alt="Pink Afro" />
<img src="images/afro_purple.png" class="afro" id="price" alt="Purple Afro" />
<img src="images/afro_rainbow.png" class="afro" id="price" alt="Rainbow Afro" />
<img src="images/afro_red.png" class="afro" id="price" alt="Red Afro" />
<img src="images/afro_white.png" class="afro" id="price" alt="White Afro" />
<img src="images/alienhead_blue.png" class="alien" id="price" alt= "Blue Alien Head" />
<img src="images/alienhead_brown.png" class="alien" id="price" alt= "Brown Alien Head" />
<img src="images/alienhead_green.png" class="alien" id="price" alt= "Green Alien Head" />
<img src="images/alienhead_grey.png" class="alien" id="price" alt= "Grey Alien Head" />
<img src="images/alienhead_purple.png" class="alien" id="price" alt= "Purple Alien Head" />
<img src="images/alienhead_red.png" class="alien" id="price" alt= "Red Alien Head" />
<img src="images/antlers_brown.png" class="antler" id="price" alt="Brown Antler" />
<img src="images/antlers_gold.png" class="antler" id="price" alt="Gold Antler" />
<img src="images/armytrousers_black.png" class="army" id="price" alt="Black Army Pants" />
<img src="images/armytrousers_blue.png" class="army" id="price" alt="Blue Army Pants" />
<img src="images/armytrousers_green.png" class="army" id="price" alt="Green Army Pants" />
<img src="images/armytrousers_pink.png" class="army" id="price" alt="Pink Army Pants" />
<img src="images/armytrousers_purple.png" class="army" id="price" alt="Purple Army Pants" />
<img src="images/armytrousers_sand.png" class="army" id="price" alt="Sand Army Pants" />
</div>
</div>
</div>
</div>
</div>
function itemInSpot(drag_item,spot)
{
var oldSpotItem = $(spot).find('img');
if(oldSpotItem.length>100) {
oldSpotItem.appendTo('#itembox4').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'});
$("#itembox4").droppable()
$("#pricebox5").droppable({ accept: 'img'})
$('#pricebox5').droppable({ accept: 'img'});
$('#pricebox5,#pricebox5,#itembox4').bind('drop', function(ev,ui) { itemInSpot(ui.draggable,this); });
$('#itembox4 img').hide();
$('#clone_button').click(function() {
$('#clone_wrapper div:#pricebox5')
.clone()
.append('')
.appendTo($('#clone_wrapper'));
})
});
$(function() {$('#filter').change(function(){
$('#itembox4 img').hide();
$('.'+$(this).val()).show();});
});
$(function() {$('#button').click(function () {
var clone = $('#pricebox1').clone().appendTo('#container');
clone.find('[new*="one"]').attr('class', 'one');
clone.find('[new*="two"]').attr('class', 'two');
clone.find('[new*="three"]').attr('class', 'three');
clone.find('[id]').removeAttr('id');
});});
我想要实现的目标是什么？
我正在尝试为用户创建4-5个盒子，以便将任何图像添加到选定的盒子中
问题是什么？
当我复制并粘贴价格框时，只有第一个框允许将图像拖放到它们中，而不管我尝试做什么。
我需要保留哪些功能？
图像需要保持拖放状态
图像应该能够在任何盒子库存/价格盒/新价格盒中来回移动
所有图像必须保留在过滤器下。
提前感谢任何可以帮助我解决此问题的人。
修正了自己
我最终将#pricebox5更改为.pricebox5，并允许他们一起更改jquery。