1
我想要的是克隆圖像到框架內的各個位置,但我只能得到一個而不是很多,有人可以告訴我什麼,米做錯了,因爲我不能看?即時通訊做的地形地圖,我可以施肥的土地,使用克隆圖像從一個div到另一個(frame div),任何有關功能的疑問,都可以問我。 PS:我對這些東西都很陌生。克隆從一個div到另一個div的img,但只獲得1個克隆
<div class="row">
<table>
<tbody>
<?php
for($i = 0, $size = count($farm)-1; $i < $size; $i++) {
if($i == 0)
echo '<tr>';
if($flag == 1){
echo '</tr>';
echo '<tr>';
$flag = 0;
}
if($farm[$i]['id_field'] == $farm[$i+1]['id_field']) {
echo '<td>';
echo '<div id="'.$farm[$i]['section_name'].'" ondrop="drop(event)" ondragover="allowDrop(event)" style="width:60px; height:60px; border:1px solid #aaaaaa;
background:#CCFF99"><center>'.$farm[$i]['section_name'].'</center></div>';
echo '</td>';
}else
$flag = 1;
if($i == $size - 1)
echo '</tr>';
}?>
</tbody>
</table>
<div class="drag">
<img id="treatment" src="<?=base_url()?>/public/img/treat.gif" draggable="true" ondragstart="drag(event)" width="40" height="40" />
</div>
</div>
//-----------------------------------------------------------------------
<script type="text/javascript">
$(document).ready(function() {
//Counter
counter = 0;
//Make element draggable
$(".drag").draggable({
helper: 'clone',
containment: 'frame',
//When first dragged
stop: function (ev, ui) {
var pos = $(ui.helper).offset();
objName = "#clonediv" + counter
$(objName).css({
"left": pos.left,
"top": pos.top
});
$(objName).removeClass("drag");
//When an existiung object is dragged
$(objName).draggable({
containment: 'parent',
stop: function (ev, ui) {
var pos = $(ui.helper).offset();
console.log($(this).attr("id"));
console.log(pos.left)
console.log(pos.top)
}
});
}
});
//Make element droppable
$("#frame").droppable({
drop: function (ev, ui) {
if (ui.helper.attr('id').search(/drag[0-9]/) != -1) {
counter++;
var element = $(ui.draggable).clone();
element.addClass("tempclass");
$(this).append(element);
$(".tempclass").attr("id", "clonediv" + counter);
$("#clonediv" + counter).removeClass("tempclass");
//Get the dynamically item id
draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
itemDragged = "dragged" + RegExp.$1
console.log(itemDragged)
$("#clonediv" + counter).addClass(itemDragged);
}
}
});
});
</script>