在jQuery中創建新元素時保留拖動選項

我正在用可拖動的可調整大小的插件在jQuery中創建一個小應用程序。在jQuery中創建新元素時保留拖動選項

我的問題是，當我通過jQuery創建一個新的元素，它不會讓我的可拖動的可調整大小的設置。

你能幫我解決嗎？

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Untitled Document</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 
<style> 
body { margin:0px; padding:0px; border:0px; font-family:Arial, Helvetica, sans-serif; } 

#PageOptions { width:240px; height:100%; border-right:1px solid #E5E5E5; margin:0px; padding:5px; background:#FFF8E7; position:absolute; } 

#PageContainer { width:986px; height:676px; border:3px solid #CCC; margin:10px 10px 10px 265px; background:#F1F1F1; position:absolute; } 
#AdContainer { width:460px; height:670px; border:1px dashed #666; margin:0px; position:absolute; background:#FFF; } 
.ui-widget-content { width:150px; height:150px; z-index:0; } 
.handle { cursor: move; background-color:#CCC; padding:0px; margin:0px; } 
.ui-resizable-helper { border: 1px dotted #900; } 

#ObjList {width:100%; height:80px; border-bottom:1px solid #E5E5E5; display:block; background:#F1F1F1; } 
ul, li { margin:0px; padding:0px; list-style-image:none; } 
li { width:50px; height:50px; border:1px solid #CCC; display:inline-block; background:#F0E8BB; margin:5px; padding:5px; overflow:hidden; font-size:12px; border-radius: 10px; } 
</style> 
<script> 
$(function() { 

    $("#adSize").text("Taille de la publicité: " + $("#AdContainer").width() + "x" + $("#AdContainer").height()); 

    $(".ui-widget-content") 
     .draggable({ 
      containment: "#AdContainer", 
      scroll: false, 
      // grid: [5, 5], 
      handle: ".handle", 
      snap: true, 
      stack: "div", 
      drag: function(event, ui) { 
       var objId = $(this).attr("id"); 
       var objPos = $(this).position(); 
       $("#objName").text("Comportement: " + objId); 
       $("#objTopPos").text("Marge à gauche: " + objPos.left + "px"); 
       $("#objLeftPos").text("Marge en haut: " + objPos.top + "px"); 
      } 
    }) 

     .resizable({ 
      animate: true, 
      containment: "#AdContainer", 
      resize: function(event, ui) { 
       var objWidth = ui.size.width; 
       var objHeight = ui.size.height; 
       $("#objWidthSize").text("Largeur: " + objWidth + "px"); 
       $("#objHeightSize").text("Hauteur: " + objHeight + "px"); 
      }, 
      minHeight: 100, 
      minWidth: 100, 
    }) 

    $(".deleteObj").click(function() { 
     $(this).parents('.ui-widget-content').remove(); 
    }) 

    // Obj creation 
    $(".createObjImage").click(function() { 
     var newObjImage = $('<div id="Image" class="ui-widget-content"><p class="handle"><span class="deleteObj">[x]</span> Image</p></div>').draggable().resizable(); 
     $("#AdContainer").append(newObjImage); 
    }) 

}); 
</script> 
</head> 

<body> 
    <div id="ObjList"> 
     <ul> 
      <li class="createObjImage">Image</li> 
      <li class="createObjAccordeon">Accordeon</li> 
      <li class="createObjSwipe">Swipe</li> 
      <li class="createObjVideo">Video</li> 
      <li class="createObjFlip">Flip</li> 
      <li class="createObjSlider">Slider</li> 
     </ul> 
    </div> 

    <div id="PageOptions"> 
     <span id="adSize"></span><br /> 
     ----------<br /> 
     <span id="objName"></span><br /> 
     <span id="objTopPos"></span><br /> 
     <span id="objLeftPos"></span><br /> 
     <span id="objWidthSize"></span><br /> 
     <span id="objHeightSize"></span> 
    </div> 

    <div id="PageContainer"> 
     <div id="AdContainer"> 
      <div id="Accordeon" class="ui-widget-content"> 
       <p class="handle"><span class="deleteObj">[x]</span> Accordeon</p> 
      </div> 
      <div id="Flip" class="ui-widget-content"> 
       <p class="handle"><span class="deleteObj">[x]</span> Flip</p> 
      </div> 
      <div id="Swipe" class="ui-widget-content"> 
       <p class="handle"><span class="deleteObj">[x]</span> Swipe</p> 
      </div> 
     </div> 
    </div> 

</body> 
</html>

來源

2012-11-18 F__M

這裏的jsFiddle：http://jsfiddle.net/ewYwC/1/ –

這裏的問題是，你與你的自定義選項初始化插件只爲初始存在的元素。您添加的動態元素未使用您的自定義選項和事件處理程序進行初始化，您只需執行.draggable()即可使用可拖動插件的默認選項。你應該將設置保存到一個變量，並把它們傳遞給任何拖動你初始化需要這些選項：

var draggableOptions = { 
    // your custom options go here 
} 

$('element').draggable(draggableOptions);

這是基於你的代碼緩存的自定義選項拖動一個工作示例：http://jsfiddle.net/XdFsg/。調整大小也是一樣。

來源

2012-11-18 13:53:52 Bogdan

謝謝蜘蛛！ –

在jQuery中創建新元素時保留拖動選項

回答

相關問題