Jquery 拖放和克隆

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2100896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 12:46:25  来源:igfitidea点击:

Jquery drag /drop and clone

jquerydrag-and-drop

提问by Sajeev

Hi I need to achive this ..

嗨,我需要达到这个..

I have a set of droppable items ( basically I am droping designs on a apparel ) and I am dropping a clone..

我有一套可放置的物品(基本上我是在服装上放置设计)并且我正在放置一个克隆..

If I don't like the dropped object (designs) - I want to delete that by doing something like hidden .

如果我不喜欢丢弃的对象(设计)- 我想通过执行 hidden 之类的操作来删除它。

But I am unable to do that.

但我无法做到这一点。

Please help me..

请帮我..



here is the code

这是代码

    var clone;
    $(document).ready(function(){
        $(".items").draggable({helper: 'clone',cursor: 'hand'});


     $(".droparea").droppable({
                    accept: ".items",
                    hoverClass: 'dropareahover',
                    tolerance: 'pointer',
                    drop: function(ev, ui)
                    {

              var dropElemId = ui.draggable.attr("id");

              var dropElem = ui.draggable.html();

                      clone = $(dropElem).clone(); // clone it and hold onto the jquery object
                      clone.id="newId";
                      clone.css("position", "absolute");
          clone.css("top", ui.absolutePosition.top);
                      clone.css("left", ui.absolutePosition.left);
              clone.draggable({ containment: 'parent' ,cursor: 'crosshair'});

                      $(this).append(clone);
                      alert("done dragging ");

                      /lets assume I have a delete button when I click that clone should dissapear so that I can drop another design - but the following code has no effect 
                      //and the item is still visible , how to make it dissapear ?
                      $('#newId').css("visibility","hidden");



               }
        });



    });

回答by fredrik

Since .clone() returns a jQuery object. clone.id="newId" sets an property on the jQuery object not the DOM element. Since the DOM element doesn't have an id property. $('#newId').length should return null. Test in firebug console

由于 .clone() 返回一个 jQuery 对象。clone.id="newId" 在 jQuery 对象而不是 DOM 元素上设置一个属性。由于 DOM 元素没有 id 属性。$('#newId').length 应该返回 null。在萤火虫控制台中测试

Use:

用:

clone.attr('id', 'newId') 

to set an ID on the cloned object's DOM element.

在克隆对象的 DOM 元素上设置 ID。

回答by There is a dream I am living T

You can use drop dragabble object function:

您可以使用拖放对象功能:

drop: function (event, ui) {
                            $(ui.draggable).remove();
                        }

after

$(this).append(clone);

in your script;

在你的脚本中;