无法按特定ID删除拖动的元素

时间:2015-03-15 13:59:27

标签: javascript jquery jquery-ui

我双击后从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;
        }
    }

0 个答案:

没有答案