jqueryのドロップボックスからクローンを削除します

jquery drag-dopボックスで練習します。アイテムをドラッグした後、ドロップボックスからアイテムのクローンを削除する方法についてはわかりません。ドラッグ項目の私のコード...jqueryのドロップボックスからクローンを削除します

<script type="text/javascript"> 
    jQuery(document).ready(function(){ 
     //Counter 
     counter = 0; 
     //Make element draggable 
     jQuery(".drag").draggable({ 
      helper:'clone', 
      containment: 'frame', 

      //When first dragged 
      stop:function(ev, ui) { 
       var pos=jQuery(ui.helper).offset(); 
       objName = "#clonediv"+counter 
       jQuery(objName).css({"left":pos.left,"top":pos.top}); 
       jQuery(objName).removeClass("drag"); 


       //When an existiung object is dragged 
       jQuery(objName).draggable({ 
        containment: 'parent', 
        stop:function(ev, ui) { 
         var pos=jQuery(ui.helper).offset(); 
         //console.log($(this).attr("id")); 
      //console.log(pos.left) 
         //console.log(pos.top) 
        } 
       }); 
      } 
     }); 
     //Make element droppable 
     jQuery("#frame").droppable({ 
     drop: function(ev, ui) { 
     if (ui.helper.attr('id').search(/drag[0-9]/) != -1){ 
      counter++; 
      var element=jQuery(ui.draggable).clone(); 
      element.addClass("tempclass"); 
      jQuery(this).append(element); 
      jQuery(".tempclass").attr("id","clonediv"+counter); 
      jQuery("#clonediv"+counter).removeClass("tempclass"); 

      //Get the dynamically item id 
      draggedNumber = ui.helper.attr('id').search(/drag([0-9])/) 
      itemDragged = "dragged" + RegExp.$1 
      //console.log(itemDragged) 

      jQuery("#clonediv"+counter).addClass(itemDragged); 
     } 
      } 
     }); 
    }); 

    </script> 



<style id='flashfirebugstyle' type='text/css'>object,embed{visibility:hidden !important;}</style><script type='text/javascript'>window.addEventListener('load', function() {document.addEventListener('DOMNodeInserted', function(e) {if(e.target.tagName.toLowerCase() == 'object' || e.target.tagName.toLowerCase() == 'embed'){try{FlashFirebug_init();}catch(e){}}}, false);try{FlashFirebug_init();}catch(e){}},false);</script></head> 

<body> 

<div id="wrapper"> 
    <ul id="options"><span><h2> Components</h2></span> 
    <li id="drag1" class="drag"> 
     <textarea name="" cols="10" rows="5"></textarea>Text box<br> 
    </li> <!-- end of drag1 --> 
    <li id="drag2" class="drag"> 
    </li> <!-- end of drag2 --> 
    <li id="drag3" class="drag"> 
     <input type="submit" value="submit" />submit_button<br> 
    </li> <!-- end of drag3 --> 
    <li id="drag4" class="drag"> 
     <input type="radio" name="group1" value="radio-button"/> radio-button<br> 
    </li> <!-- end of drag4 --> 
    </ul><!-- end of options --> 
    <h2> Mockup Page</h2> 
    <div id="frame"> 
    <span id="title">Drag here</span> 
    <div id="tbldevs" > </div> 
    </div><!-- end of frame --> 
</div><!-- end of wrapper --> 
</body> 
</html>

は、どのように私は、ドロップボックスから項目を削除することができます。

出典

2012-01-05 Jackson

私はあなたの質問を正しく理解しているかどうかわかりません。以前はドロップ可能領域で削除した要素を削除したいのですか？

これがポイントであれば、このフィドルを見てみることができます：http://jsfiddle.net/scaillerie/YBPc4/。

要素を削除したら、その要素をCtrlキーを押しながらクリックします（他のイベントも使用できます）。この要素は削除されます。

jQuery("#frame").delegate(".ui-draggable", "click", function(e) { 
    if (e.ctrlKey) { 
     $(this).remove(); 
    } 
});

ドロップされた要素は、セレクタ "ui-draggable"によってdiv "frame"に取り込まれます。

出典

2012-01-05 09:49:38

jqueryのドロップボックスからクローンを削除します

答えて

関連する問題