Jquery拖放和克隆 [英] Jquery drag /drop and clone

问题描述

我有一套可下载的项目（基本上我是在服装上放下的设计），我正在放弃一个克隆。

如果我不喜欢删除的对象（设计） - 我想通过做一些隐藏的内容来删除它。

但我无法做到这一点。

请帮助我..

---

这里是代码

  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（）; //克隆它并保持到jquery对象
 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）.appe nd（clone）; 
 alert（done dragging）; 
 
 /让我假设我有一个删除按钮，当我点击该克隆应该消失，以便我可以删除另一个设计 - 但以下代码没有影响
 //，该项目仍然可见怎么让它消失？ 
 $（'＃newId'）。css（visibility，hidden）; 
 
 
 
} 
}）; 
 
 
 
}）; 
  

解决方案

由于.clone（）返回一个jQuery对象。 clone.id =newId在jQuery对象上设置一个属性，而不是DOM元素。因为DOM元素没有id属性。 $（'＃newId'）。length应返回null。在firebug控制台中测试

使用：

  clone.attr id'，'newId'）
  

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

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 .

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");



               }
        });



    });

解决方案

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

Use:

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

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

这篇关于Jquery拖放和克隆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！