2012-02-22 14 views
13

ここでは簡単な質問です。私はjulery-sortのsortable()関数を使ってソート可能な 'ul'を持っています。彼らがリストからドラッグされたときに要素を削除したい。私が実装した方法は、リストから要素をドラッグすると削除されますが、リストを並べ替えると削除されるという意味でも機能します。この意図しない振る舞いがなければ、私が探している振る舞いをどのように達成するのですか?以下はすべてのコードです:そのリストから取り除かれたアイテムを削除するには?

<html> 
<head> 
    <link type="text/css" href="jquery-ui/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="Stylesheet" /> 
    <script type="text/javascript" src="jquery-ui/js/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.17.custom.min.js"></script> 

    <script type="text/javascript"> 
    $(function(){ 
     $('#sortme').sortable({ 
      out: function(event, ui){ 
       ui.item.remove(); 
      } 
     }); 
     $('#sortme').disableSelection(); 
    }); 
    </script> 

    <style> 
    li{ 
     list-style-type: none; 
     width: 200px; 
     height: 50px; 
     border: 1px solid #000; 
     text-align: center; 
     box-sizing: border-box; 
     padding-top: 15px; 
    } 
    </style> 
    <title> jqui sort test </title> 

</head> 
<body> 
    <ul id='sortme'> 
     <li>0</li> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     <li>4</li> 
     <li>5</li> 
     <li>6</li> 
     <li>7</li> 
     <li>8</li> 
     <li>9</li> 
    </ul> 
</body> 
</html> 

ありがとうございました!

答えて

25

変数を使用して、ドラッグしている項目が親コンテナからドラッグされていないかどうかを確認できます。

あなたはこの変数の値を代入して、beforeStopイベントにドラッグしたアイテムの削除を実行するためにソート可能なjQueryのUIのうちを超えるとイベントを使用することができます。ここ

は、私が出ているかのデモです:http://jsfiddle.net/drewP/m7VJq/1/

はそれがあなたのために働くなら、私に知らせてください。

+0

オーバー/アウトを忘れました。ありがとう! :-D – Fallenreaper

+0

これはすごく鮮明だった!日を保存ドリュー! :) – cbloss793

0

私はそれを行うための複数の正しい方法があると確信していますが、もし私がそれをしなければならない場合は、おそらくラッパー要素を落書きとして使用します。どうしてメインサイトのコンテナ、オールマイティ#ラッパー!ドロップ可能のイベントdropにバインドし、項目を完全に削除します。どちらもソート可能ではありません。

関連する問題