web-dev-qa-db-ja.com

jQuery UI Draggableのカスタムヘルパー

ドラッグ可能なjQuery UIがあり、元の要素のすべてではなく一部の情報を含むカスタムヘルパーを作成しようとしました。

これが私のドラッグ可能な要素です。

<ul>
  <li><div>Name</div> <span>12-12-2011</span></li>
  <li><div>Another name</div> <span>12-12-2011</span></li>
</ul>

そしてjQuery;

$("ul li").draggable(function(){
  helper: function(){
    return $("<div></div>");
  }
});

ドラッグ中、ユーザーには名前のみが含まれ、時間要素は含まれないヘルパーがあるという考えになります。

私の実際のコードはこれよりも少し複雑なので、私が本当に探しているのは、元の要素またはそのコピーを選択して、あらゆる種類のjQueryマジックを実行できるセレクターです（フィルタリング要素、新しい要素、クラスの追加など）

しかし、私の人生ではこれを見つけることができません。ドラッグ可能なサックのドキュメントと#jqueryの誰も助けてくれません。何か案は？

前もって感謝します！

javascriptjqueryjquery-uijquery-ui-draggable
17
Emphram Stavanger

まず、draggableを呼び出す方法に誤りがあります。予期されるパラメーターは、関数ではなくオブジェクトリテラルです。

thisは、helper関数で現在ドラッグされている要素です。

次のhtmlを持っている

<ul>
  <li><div class="name">Name</div> <span>12-12-2011</span></li>
  <li><div class="name">Another name</div> <span>12-12-2011</span></li>
</ul>

あなたはこれを行うことができます：

$('ul li').draggable({
    helper: function() {
        //debugger;
        return $("<div></div>").append($(this).find('.name').clone());
    }
});

注：<div>にクラスを追加して、選択するために名前を示していますが、他の方法でクラスを選択することもできます。

確認するための jsfiddle を次に示します。

32
Didier Ghys

OK、簡単なテストで次のように動作します...

$("ul li").draggable({
    helper: function() {
        return $("<div>hello</div>");
    } });

関数をドラッグ可能なパラメーターとして渡さないことに注意してください。また、ヘルパーDIVに実際に何かが含まれるように、サンプルに「hello」を追加しました。

[〜＃〜] edit [〜＃〜]：これにより、要素が削除されないようです、うーん...

A FIX：きれいではありませんが、これは機能します。改善のためのいくつかのアイデアが得られる可能性があります...

var remember;
$("ul li").draggable({
    helper: 'original',
    start: function(e, ui) {
        remember = $(this).html();
        $(this).html("<div>hello</div>");
    },
    stop: function(e, ui) {
        $(this).html(remember);
    }
});

ここの例

「記憶」変数のアイデアが気に入らない場合は、元のhtmlを保持できるドラッグ可能なオブジェクトにカスタムオプションを追加しても問題ないようです...

$("ul li").draggable({
    helper: 'original',
    start: function(e, ui) {
        $(this).draggable("option", "olddata", $(this).html());
        $(this).html("<div>hello</div>");
    },
    stop: function(e, ui) {
        $(this).html($(this).draggable("option", "olddata"));
    }
});
9
musefan

1つの可能な解決策は

フィドル： http://jsfiddle.net/SWbse/

   $(document).ready(function() {
      $("ul li").draggable({
         helper: 'clone',
         start: function(event, ui){
            ui.helper.children('span').remove();
         }    
     });
   });
3
Ehtesham