如何繼承jquery中新創建對象的現有設置？

我正在使用jquery插件來創建一些可拖動的對象。如何繼承jquery中新創建對象的現有設置？

該插件是here並且演示是here。

而且我用的jsfiddle測試here

腳本始於此：

$('.drag') 
    .live("click", function(){ 
     $(this).toggleClass("selected"); 
    }) 
    .drag("init",function(){ 
     if ($(this).is('.selected')) 
      return $('.selected');      
    }) 
    .drag("start",function(ev, dd){ 
     dd.attr = $(ev.target).attr("className"); 
     dd.width = $(this).width(); 
     dd.height = $(this).height(); 
     dd.limit = $div.offset(); 
     dd.limit.bottom = dd.limit.top + $div.outerHeight() - $(this).outerHeight(); 
     dd.limit.right = dd.limit.left + $div.outerWidth() - $(this).outerWidth(); 
    }) 
    .drag(function(ev, dd){ 
     var props = {}; 
     if (dd.attr.indexOf("E") > -1){ 
      props.width = Math.round(Math.max(32, dd.width + dd.deltaX)/ 20) * 20; 
     } 
     if (dd.attr.indexOf("S") > -1){ 
      props.height = Math.round(Math.max(32, dd.height + dd.deltaY)/ 20) * 20; 
     } 
     if (dd.attr.indexOf("drag") > -1){ 
      props.top = Math.round(Math.min(dd.limit.bottom, Math.max(dd.limit.top, dd.offsetY))/ 20) * 20; 
      props.left = Math.round(Math.min(dd.limit.right, Math.max(dd.limit.left, dd.offsetX))/ 20) * 20; 
     } 
     $(this).css(props); 
});

它可能看起來複雜，但，但它的作用是使一些可拖動的div HOR這htnl：

<input type="button" id="add" value="Add a Box" /> 
<div class="test" id="container"> 


<div class="drag" style="left:100px;"> 
    <div class="handle SE"></div> 
</div> 
<div class="drag" style="left:180px;"> 
    <div class="handle SE"></div> 
</div> 

</div>

然後我用一個按鈕添加一些更多的VID：

var $div = $('#container'); 
var num = 1; 
    $('#add').click(function(){ 
     $('<div class="handle SE"><div class="drag" style="left:20px;"/>') 
      .text(num++) 
      .appendTo(document.body) 
      .wrap('<div class="drag" style="left:20px;"/>'); 
    });

而我遇到的問題是，新創建的DIV點繼承已有的設置。

如果我添加了單獨的代碼將與合作：

$('.drag').live("drag",function(ev, dd){ 
     $(this).css({ 
      top: Math.round(dd.offsetY/20) * 20, 
      left: Math.round(dd.offsetX/20) * 20 
     }); 
});

，但我想在新創建的塊使用的第一個腳本。所以我想問題是，設置不是繼承

任何想法？謝謝

來源

2011-12-24 Patrioticcow

您必須在新創建的元素上特別添加腳本，否則它將不適用。將拖動腳本初始化放在一個單獨的函數中，並將其稱爲新的div元素：

$('#add').click(function(){ 
     var newDiv = $('<div class="handle SE"><div class="drag" style="left:20px;"/>') 
      .text(num++) 
      .appendTo(document.body) 
      .wrap('<div class="drag" style="left:20px;"/>'); 
      initDrag(newDiv); 
    });

來源

2011-12-24 22:19:38 zdrsh

如何繼承jquery中新創建對象的現有設置？

回答

相關問題