<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 個のボックスを作成しようとしています。
問題は何ですか？
価格ボックスをコピーして貼り付けると、最初のボックスだけで、何をしようとしても画像をドラッグアンドドロップできます。
どの機能を保持する必要がありますか?
画像はドラッグ アンド ドロップのままにする必要があります。
画像は、在庫/価格ボックス/新しい価格ボックスのいずれかのボックスを行き来できる必要があります。
すべての画像はフィルターの下にある必要があります。
この問題の解決を手伝ってくれる人に事前に感謝します。
最終的にtoを
変更して自分自身を修正し、jquery の変更とともに入力できるようにしました。#pricebox5.pricebox5