拖放克隆和調整大小使用jquery

我有一些jquery代碼，我想能夠拖放，克隆和調整大小。我可以在第一次嘗試時拖放和調整大小。之後，我將該克隆物品拖放到容器周圍，無法再調整大小。任何想法爲什麼？如下拖放克隆和調整大小使用jquery

.col{ 
    float:left; 
    padding: 5px 5px 5px 5px; 
    margin: 5px 5px 5px 5px; 
} 

#col1{ 
    width:200px; 
    height:500px; 
    border:1px solid black; 

} 

.drag{ 
    width:100px; 
    border:1px solid black; 
    height:40px; 
    position:relative; 
    background-color:red; 
} 

#droppable{ 
    width:500px; 
    height :500px; 
    border:1px solid black; 
    } 

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="dragndrop.css" /> 
     <script src="http://www.google.com/jsapi" type="text/javascript"></script> 
     <script type="text/javascript"> 
      google.load("jquery", "1.6.3"); 
      google.load("jqueryui", "1.8.16"); 
     </script> 
     <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/> 
     <script src="dragndrop.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <div class = "col" id="col1"> 
       <div id="drag1" class="drag"> 
       </div> 
      </div> 
      <div class="col" id ="droppable"> 
      </div> 
     </div> 
    </body> 
</html> 

$(document).ready(function() { 

    var x = null; 

    //Make element draggable 
    $(".drag").draggable({ 
     helper: 'clone', 
     cursor: 'move', 
     tolerance: 'fit' 
    }); 

    $("#droppable").droppable({ 

     drop: function(e, ui) { 

      x = ui.helper.clone(); 
        x.draggable({ 
       helper: 'original', 
       containment: '#droppable', 
       tolerance: 'fit' 
      }); 
      x.resizable({ 
       maxHeight: 40, 
       minHeight:40, 
       minWidth:50 
      }); 
      x.appendTo('#droppable'); 
      ui.helper.remove(); 
     } 
    }); 

});

來源

2012-05-11 edelweiss

你引用腳本文件dragndrop.js - 你可以提供一個腳本呢？ –

哦，dragndrop.js是我上面發佈的jQuery代碼。對不起，我沒有明確說明它 – edelweiss

你可能也想發佈相關部分的CSS –

問題

我的HTML，CSS和jQuery從dragndrop.js是你克隆，這是已經可放開表面上的股利。

我加了檢查（可能需要更新），看看是否ID設置（當它們被克隆的ID被設置爲「」），如果是空白的，然後克隆並加入到投擲的表面，否則，離開僅此而已，它已經可以放棄。

 $("#droppable").droppable({ 

      drop: function (e, ui) { 

       if ($(ui.draggable)[0].id != "") { 
        x = ui.helper.clone(); 
       ui.helper.remove(); 
       x.draggable({ 
        helper: 'original', 
        containment: '#droppable', 
        tolerance: 'fit' 
       }); 
       x.resizable({ 
        maxHeight: 40, 
        minHeight: 40, 
        minWidth: 50 
       }); 
       x.appendTo('#droppable'); 
      } 

      } 
     });

查看完整的示範這裏http://jsfiddle.net/ezzxX/2/

來源

2012-05-11 18:18:45

謝謝！它完美的作品！ – edelweiss

拖放克隆和調整大小使用jquery

回答

相關問題