在拖放區域中拖動時替換元素

我正在嘗試編寫1個具有「p」標籤的應用程序，並且可以拖放1個「div」標籤作爲拖放區域。在拖放區域中拖動時替換元素

當我將「p」標籤拖放到拖放區域時，它們會追加到拖放區域。

我可以拖10「P」標籤多了，但我想，當我拖到新的「P」標籤，老的「P」標籤必須刪除或替換

請給我一些建議！非常感謝

這是我的代碼：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 

    <title>jQuery UI Touch Punch - Mobile Device Touch Event Support for jQuery UI</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" /> 
    <link href="css/jquery-ui.css" rel="stylesheet"> 
    <link href="css/jquery-ui1.css" rel="stylesheet"> 

    <style>body { background:#fff; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; }</style> 

    <script src="js/cordova-2.5.0.js"></script> 
    <script src="js/jquery-1.7.2.min.js"></script> 
    <script src="js/jquery.mobile-1.1.1.min.js"></script> 
    <script src="js/jquery-ui.min.js"></script> 
    <script src="js/jquery.ui.touch-punch.min.js"></script> 

    </head> 
    <body> 
    <div class="container"> 
     <script> 
     $(function() { 

      var chu = ["aaa","bbb","ccc","ddd","eee","fff","ggg","hhh","jjj","kkk","lll","mmm"]; 
      $("p").text(function(){ 
       return chu[ Math.floor((Math.random()*chu.length)+0)]; 
      }); 
      var c = 0; 

      $('#dragSource p').draggable({ 
       helper: function(){ 
       var selected = $('#dragSource').parents('p'); 
       if (selected.length === 0) { 
       selected = $(this); 
       } 
       var container = $('<div/>').attr('id', 'draggingContainer'); 
       container.append(selected.clone()); 
       return container; 
      } 
      }); 

      $('#c').droppable({ 
       tolerance: 'pointer', 
       drop: function(event, ui){ 
        $(this).append(ui.helper.children()); 
        c++; 
        while(c == 2) { 
         $(this).find('p').remove(); 
         c = 0; 
        } 
      } 
      }); 

     }); 
     </script> 
     <div class="demo"> 
     <div id="dragSource" class="droppableContainer"> 
      <p></p> 
      <p></p> 
      <p></p> 
      <p></p> 
     </div> 
     <input id="canvasDraw" type="button" value="New Game"/> 
     <ul id="c" class="droppableContainer" style="display:inline;border:1px solid #d3d3d3;width: 150px; height: 150px;float:left;vertical-align: middle;"> 
     </ul> 
     </div><!-- End demo --> 
    </div> 
    </body> 
</html>

編輯：

我改變了下降的區域（從「UL」標籤進入「輸入」標籤），但它COBE不工作;請給我一些建議！我是新的，對網絡知之甚少！

這是我的變化：

<input id="c" class="droppableContainer" style="display:inline;border:1px solid #d3d3d3;width: 150px; height: 150px;float:left;vertical-align: middle;"/>

和

$('#c').droppable({ 
      tolerance: 'pointer', 
      drop: function(event, ui){ 
       $(this).disable(); 
       $(this).find('p').remove(); 
       $(this).append(ui.helper.children()); 
       htmlOfDroppedElement = $(ui.draggable).html(); 
       pElementToBeReplaced = $(this).find('p'); 
       $(pElementToBeReplaced).html(htmlOfDroppedElement); 
     } 
     });

編輯2：

我已經做

htmlOfDroppedElement = $(ui.draggable).html(); 
       $(this).val(htmlOfDroppedElement);

來源

2013-03-19 Lê Huy

哪個p標記要刪除？從那些可拖拽的或者之前丟棄的那些？ – mridula 2013-03-19 09:10:45

我想替換之前丟棄的那個，現在丟棄！ – 2013-03-19 09:16:41

$('#c').droppable({ 
    tolerance: 'pointer', 
     drop: function(event, ui) { 
      htmlOfDroppedElement = $(ui.draggable).html(); 
      pElementToBeReplaced = $(this).find('p'); 
      $(pElementToBeReplaced).html(htmlOfDroppedElement); 
     } 
    });

在這裏，我只是用可拖動div的<p>元素替換可丟棄div的<p>元素中的html。

來源

2013-03-19 09:08:56 mridula

謝謝！我正在嘗試改進我的代碼！ – 2013-03-19 09:17:01

在拖放區域中拖動時替換元素

回答

相關問題