我双击后从json数组中删除拖动的项目,但删除后我无法获取拖动元素的id。
例如,当我拖动clone1,clone2,clone3项时,我可以双击删除clone3项(双击alert(#clonediv3)之后),但是当我双击删除clone2项时,它也会发出警告#clonediv3也是。
双击删除
$("#frame").delegate(".ui-draggable", "dblclick", function(e) {
//$(this).css('border-style', 'solid');
$objName = $(e.target).attr("id");
alert(objName);
var index = exist_object(objName);
alert(index);
//if exists update top and left
if(index!=-1) {
counter--;
alert(counter);
$(this).remove();
//myArray.remove(index).clean();
myArray.remove(index);
}
});
拖放功能
//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).css('border-style', 'solid', '1px');
//When an existiung object is dragged
$(objName).draggable({
containment: 'parent',
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
var index = exist_object(objName);
if(index!=-1) { //if exists update top and left
myArray[index].y = pos.top;
myArray[index].x = pos.left;
}
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])/);
var ca = document.getElementById("sel1").value;
if(ca == "head"){
itemDragged = "dragged" + 1;
}else if(ca == "body"){
itemDragged = "dragged" + 2;
}else if(ca == "shoes"){
itemDragged = "dragged" + 3;
}else{
itemDragged = "dragged" + 1;
}
console.log(itemDragged);
$("#clonediv"+counter).addClass(itemDragged);
var pos=$(ui.helper).offset();
var objsrc = $(this).find(".drag").last().attr("src");
var objtop = pos.top;
var objleft = pos.left;
var objid = $(this).find('.drag').last().attr('id');
objid = "#"+objid;
myArray.push({"id":objid,"src":objsrc,"x":objleft,"y":objtop});
}
}
});
查找现有功能
function exist_object(id){
for(var i = 0;i<myArray.length;++i){
if(myArray[i].id == id)
return i;
}
return -1;
}
}