在拖放位置丢弃可拖放的内容

我一直在尝试克隆和拖放可拖动内容的位置处的拖动器，该位置发生拖动的坐标为。我在网上找到了一些例子来处理将可拖动对象添加到可拖放对象的问题，但它们似乎都将可拖动对象移动到初始拖放对象的特定部分。在拖放位置丢弃可拖放的内容

这里，不只是一个例子： - http://jsfiddle.net/scaillerie/njYqA/

//JavaScript from the jsfiddle 
jQuery(function() { 
jQuery(".component").draggable({ 
    // use a helper-clone that is append to 'body' so is not 'contained' by a pane 
    helper: function() { 
     return jQuery(this).clone().appendTo('body').css({ 
      'zIndex': 5 
     }); 
    }, 
    cursor: 'move', 
    containment: "document" 
}); 

jQuery('.ui-layout-center').droppable({ 
    activeClass: 'ui-state-hover', 
    accept: '.component', 
    drop: function(event, ui) { 
     if (!ui.draggable.hasClass("dropped")) 
      jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable()); 
     } 
    }); 
});

反正我可以在其中下垂发生的坐标可拖动留？

来源

2014-10-11 Sean Law

必须定义在下降克隆元素的坐标：

下降：函数（事件，UI）{ 如果（ui.draggable.hasClass（“下降“））

 var clone=jQuery(ui.draggable).clone().addClass("dropped").draggable(); 
     clone.css('left',ui.position.left);  
     clone.css('top',ui.position.top); 

     jQuery(this).append(clone); 
    } 
});

，还可以设置绝对位置由CSS上的已克隆部件

.ui-layout-center .component { 
    position:absolute !important; 
}

这里工作：http://jsfiddle.net/o2epq7p2/

来源

2014-10-11 08:19:55 Balder

实现了这一点，它完美的工作！ – 2014-10-12 12:08:54

很高兴帮助:) – Balder 2014-10-12 17:03:40

uidrop处理程序包含拖动元素的绝对位置到页面。您需要将这些值转换为相对于放置目标的位置，并使用这些值将放置目标中的克隆元素绝对定位。

drop: function(e, ui) { 
     if (!ui.draggable.hasClass("dropped")) { 
      var parentOffset = jQuery('.ui-layout-center').offset(); 
      var dropped = jQuery(ui.draggable).clone().addClass("dropped").draggable(); 
      dropped.css('left', (ui.position.left - parentOffset.left) +'px'); 
      dropped.css('top', (ui.position.top - parentOffset.top) +'px'); 

      jQuery(this).append(dropped); 
     } 
    }

http://jsfiddle.net/3Lnqocf3/

来源

2014-10-11 08:19:30

这完全得工作！感谢您的答复！ – 2014-10-12 12:09:28

编辑你的代码，并使用appendTo（），并设置偏移

jQuery(function() { 
    jQuery(".component").draggable({ 
     // use a helper-clone that is append to 'body' so is not 'contained' by a pane 
     helper: function() { 
      return jQuery(this).clone().appendTo('body').css({ 
       'zIndex': 5 
      }); 
     }, 
     cursor: 'move', 
     containment: "document" 
    }); 

    jQuery('.ui-layout-center').droppable({ 
     activeClass: 'ui-state-hover', 
     accept: '.component', 
     drop: function(event, ui) { 
      var _this = jQuery(this); 
      if (!ui.draggable.hasClass("dropped")) { 
       var cloned = jQuery(ui.draggable).clone().addClass("dropped").draggable(); 
       jQuery(cloned).appendTo(this).offset({ 
        top : ui.offset.top, 
        left: ui.offset.left 
       }); 
      } 
     } 
    }); 
});

来源

2014-10-11 08:31:33

在拖放位置丢弃可拖放的内容

回答

相关问题