メインのdivの挿入された要素をドラッグして削除したい

ここに私のコードがあります。大きなdivの挿入/削除された要素を取り除きたいのですが、私のコードは私の助けてください。コードがそれは私のために動作しません。私はjqueryに新しいですガイドしてください。メインのdivの挿入された要素をドラッグして削除したい

$(function() { 
 
    $("ul li").each(function(){ 
 
     $(this).draggable({ 
 
      helper: "clone" 
 
     }); 
 
    }); 
 
    
 
    $(".day").droppable({ 
 
     activeClass: "ui-state-hover", 
 
     hoverClass: "ui-state-active", 
 
     accept: ":not(.ui-sortable-helper)", 
 
     drop: function(event, ui) { 
 
      var targetElem = $(this).attr("id"); 
 

 
      $(this).addClass("ui-state-highlight"); 
 
      if($(ui.draggable).hasClass('draggable-source')) 
 
       $(ui.draggable).clone().appendTo(this).removeClass('draggable-source'); 
 
      else 
 
       $(ui.draggable).appendTo(this); 
 
      // Remove element 
 
      $(ui.draggable).remove(); 
 

 
     } 
 
    }).sortable({ 
 
     items: "li:not(.placeholder)", 
 
     sort: function() { 
 
      $(this).removeClass("ui-state-default"); 
 
     } 
 
    }); 
 
\t \t 
 
});

h1 {font-family:Helvetica Neue, Helvetica, Arial, sans-serif;margin-top:0;font-size:36px;} 
 
     td { 
 
      text-align:; 
 
\t \t \t display:inline-block; 
 
    
 
     } 
 
     tr:first-child td { 
 
      border-bottom:0; 
 
      border-top:0; 
 
     } 
 
     tr:nth-child(2) td { 
 
      border-top:0; 
 
      border-bottom:0; 
 
     } 
 
     td:first-child { 
 
      border-left:0; 
 
     } 
 
     td:last-child { 
 
      border-right:0; 
 
     } 
 
     div.day { 
 
      width:1000px; 
 
\t \t \t min-height: 300px; 
 
      margin:0; 
 
\t \t \t border: 1px solid black; 
 
\t \t \t 
 
     } 
 
     div#drag { 
 
      width:120px; 
 
      height:40px; 
 
      padding:5px; 
 
      margin:5px; 
 
      display:inline-block; 
 
      text-align:center; 
 
      line-height: 40px; 
 
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
 
      font-weight: bold; 
 
      font-size:18px; 
 
      color:white; 
 
      text-shadow:0 1px 0 grey; 
 
      border:1px solid rgba(0,0,0,.1); 
 
     } 
 
     div#drag:hover {cursor:move;} 
 
     div#subjects ul li { 
 
      display:inline-block; 
 
     } 
 
     li, ul { 
 
      list-style-type: none; 
 
     }

<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>jQuery UI Droppable - Default functionality</title> 
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> 
 

 
    </head> 
 
    <body> 
 
    <table id="days"> 
 
     <tr> 
 
     <td>Drag and Drop here</td> 
 

 

 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <div id="div1" class="day monday ui-widget-content"> 
 
      </div> 
 
     </td> 
 

 

 
     </tr> 
 
    </table> 
 
    <ul> 
 
     <li class="draggable-source"> 
 
     <div style="background-color:brown;" id="drag">Element 1</div> 
 
     </li> 
 
     <li class="draggable-source"> 
 
     <div style="background-color:orange;" id="drag">Element 2</div> 
 
     </li> 
 
     <li class="draggable-source"> 
 
     <input id="drag" type="button" value="dragme"> 
 
     </li> 
 
    </ul> 
 
    </body> 
 

 
</html>

出典

2016-05-12 router

私は '（削除を参照することはできません）' – Bhumika107

あなたはドロップ要素とはliveクリックイベントをバインドするときremoveThisのようにクラスを追加する必要があります。アイテムがドロップされた

$(function() { 
 
    $("ul li").each(function(){ 
 
     $(this).draggable({ 
 
      helper: "clone" 
 
     }); 
 
    }); 
 
    
 
    $(".day").droppable({ 
 
     activeClass: "ui-state-hover", 
 
     hoverClass: "ui-state-active", 
 
     accept: ":not(.ui-sortable-helper)", 
 
     drop: function(event, ui) { 
 
      var targetElem = $(this).attr("id"); 
 

 
      $(this).addClass("ui-state-highlight"); 
 
      if($(ui.draggable).hasClass('draggable-source')) 
 
       $(ui.draggable).clone().appendTo(this).removeClass('draggable-source'); 
 
      else 
 
       $(ui.draggable).appendTo(this); 
 
       
 
      console.log(this.id) 
 
     } 
 
    }).sortable({ 
 
     items: "li:not(.placeholder)", 
 
     sort: function() { 
 
      $(this).removeClass("ui-state-default"); 
 
     } 
 
    }); 
 
\t \t 
 
});

h1 {font-family:Helvetica Neue, Helvetica, Arial, sans-serif;margin-top:0;font-size:36px;} 
 
     td { 
 
      text-align:; 
 
\t \t \t display:inline-block; 
 
    
 
     } 
 
     tr:first-child td { 
 
      border-bottom:0; 
 
      border-top:0; 
 
     } 
 
     tr:nth-child(2) td { 
 
      border-top:0; 
 
      border-bottom:0; 
 
     } 
 
     td:first-child { 
 
      border-left:0; 
 
     } 
 
     td:last-child { 
 
      border-right:0; 
 
     } 
 
     div.day { 
 
      width:1000px; 
 
\t \t \t min-height: 300px; 
 
      margin:0; 
 
\t \t \t border: 1px solid black; 
 
\t \t \t 
 
     } 
 
     div#drag { 
 
      width:120px; 
 
      height:40px; 
 
      padding:5px; 
 
      margin:5px; 
 
      display:inline-block; 
 
      text-align:center; 
 
      line-height: 40px; 
 
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
 
      font-weight: bold; 
 
      font-size:18px; 
 
      color:white; 
 
      text-shadow:0 1px 0 grey; 
 
      border:1px solid rgba(0,0,0,.1); 
 
     } 
 
     div#drag:hover {cursor:move;} 
 
     div#subjects ul li { 
 
      display:inline-block; 
 
     } 
 
     li, ul { 
 
      list-style-type: none; 
 
     }

<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>jQuery UI Droppable - Default functionality</title> 
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> 
 

 
    </head> 
 
    <body> 
 
    <table id="days"> 
 
     <tr> 
 
     <td>Drag and Drop here</td> 
 

 

 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <div id="div1" class="day monday ui-widget-content"> 
 
      </div> 
 
     </td> 
 

 

 
     </tr> 
 
    </table> 
 
    <ul> 
 
     <li class="draggable-source"> 
 
     <div style="background-color:brown;" id="drag">Element 1</div> 
 
     </li> 
 
     <li class="draggable-source"> 
 
     <div style="background-color:orange;" id="drag">Element 2</div> 
 
     </li> 
 
     
 
    </ul> 
 
    </body> 
 

 
</html>

出典

2016-05-12 11:58:03

何私はどこから削除する親要素を削除したくありません私はこれらの要素を落とす – router

@router私の更新された回答を参照してください –

すごいありがとう@jitendra Tiwari – router

使用$(ui.draggable).remove()ボックスを取り外す。

更新されたコードを確認してください。

ない

$(function() { 
 
    $("ul li").each(function(){ 
 
     $(this).draggable({ 
 
      helper: "clone" 
 
     }); 
 
    }); 
 
    
 
    $(".day").droppable({ 
 
     activeClass: "ui-state-hover", 
 
     hoverClass: "ui-state-active", 
 
     accept: ":not(.ui-sortable-helper)", 
 
     drop: function(event, ui) { 
 
      var targetElem = $(this).attr("id"); 
 

 
      $(this).addClass("ui-state-highlight"); 
 
      if($(ui.draggable).hasClass('draggable-source')) 
 
       $(ui.draggable).clone().appendTo(this).removeClass('draggable-source').addClass('removeThis'); 
 
      else 
 
       $(ui.draggable).appendTo(this); 
 
       
 
      // REMOVE THIS ELEMENT USING THIS 
 
      //$(ui.draggable).remove() 
 
     } 
 
    }).sortable({ 
 
     items: "li:not(.placeholder)", 
 
     sort: function() { 
 
      $(this).removeClass("ui-state-default"); 
 
     } 
 
    }); 
 
    
 
    // add "removeThis" class when drop in box and bind this live event 
 
    $('.removeThis').live("click",function(){ 
 
    if(confirm('Are you sure you want to remove this box?')){ 
 
     $(this).remove(); 
 
     } 
 
    }); 
 
\t \t 
 
});

h1 {font-family:Helvetica Neue, Helvetica, Arial, sans-serif;margin-top:0;font-size:36px;} 
 
     td { 
 
      text-align:; 
 
\t \t \t display:inline-block; 
 
    
 
     } 
 
     tr:first-child td { 
 
      border-bottom:0; 
 
      border-top:0; 
 
     } 
 
     tr:nth-child(2) td { 
 
      border-top:0; 
 
      border-bottom:0; 
 
     } 
 
     td:first-child { 
 
      border-left:0; 
 
     } 
 
     td:last-child { 
 
      border-right:0; 
 
     } 
 
     div.day { 
 
      width:1000px; 
 
\t \t \t min-height: 300px; 
 
      margin:0; 
 
\t \t \t border: 1px solid black; 
 
\t \t \t 
 
     } 
 
     div#drag { 
 
      width:120px; 
 
      height:40px; 
 
      padding:5px; 
 
      margin:5px; 
 
      display:inline-block; 
 
      text-align:center; 
 
      line-height: 40px; 
 
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
 
      font-weight: bold; 
 
      font-size:18px; 
 
      color:white; 
 
      text-shadow:0 1px 0 grey; 
 
      border:1px solid rgba(0,0,0,.1); 
 
     } 
 
     div#drag:hover {cursor:move;} 
 
     div#subjects ul li { 
 
      display:inline-block; 
 
     } 
 
     li, ul { 
 
      list-style-type: none; 
 
     }

<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>jQuery UI Droppable - Default functionality</title> 
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> 
 

 
    </head> 
 
    <body> 
 
    <table id="days"> 
 
     <tr> 
 
     <td>Drag and Drop here</td> 
 

 

 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <div id="div1" class="day monday ui-widget-content"> 
 
      </div> 
 
     </td> 
 

 

 
     </tr> 
 
    </table> 
 
    <ul> 
 
     <li class="draggable-source"> 
 
     <div style="background-color:brown;" id="drag">Element 1</div> 
 
     </li> 
 
     <li class="draggable-source"> 
 
     <div style="background-color:orange;" id="drag">Element 2</div> 
 
     </li> 
 
     <li class="draggable-source"> 
 
     <input id="drag" type="button" value="dragme"> 
 
     </li> 
 
    </ul> 
 
    </body> 
 

 
</html>

出典

2016-05-12 11:56:08 t1m0n

私はこれらの要素をドロップする場所から削除する何 – router

メインのdivの挿入された要素をドラッグして削除したい

答えて

関連する問題