【问题标题】:Jquery drag /drop and cloneJquery拖放和克隆
【发布时间】:2011-01-07 05:42:57
【问题描述】:

你好,我需要实现这个..

我有一组可丢弃的物品(基本上我正在丢弃一件衣服上的设计)并且我正在丢弃一个克隆..

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

但我做不到。

请帮帮我..


这里是代码

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



               }
        });



    });

【问题讨论】:

    标签: jquery drag-and-drop


    【解决方案1】:

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

    用途:

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

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

    【讨论】:

    • 最好还是使用 clone[0].id = "newid";
    【解决方案2】:

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

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

    之后

    $(this).append(clone);
    

    在你的脚本中;

    【讨论】:

      猜你喜欢
      • 2013-06-15
      • 1970-01-01
      • 2013-03-08
      • 1970-01-01
      • 2011-10-18
      • 1970-01-01
      • 1970-01-01
      • 2018-05-13
      • 1970-01-01
      相关资源
      最近更新 更多