1

この例を Jquery Live Dragable に使用しました。

ライブ イベントを使用した jQuery ドラッグ アンド ドロップ

しかし、jquery 1.7で.onを使用するように変換したいのですが、あらゆる種類の順列を試してみました。

.live を使用して .livedragable メソッドを作成する作業コードは次のとおりです。

(function ($) {
$.fn.liveDraggable = function (opts) {
  $(this).live("mousemove.liveDraggable", function() {
      $this = $(this);
     $this.draggable(opts);
      $this.off('mousemove.liveDraggable'); // kill the mousemove
  });
  return $();
 };
}(jQuery));

liveraggable の呼び出しは次のとおりです。

    $(".item").liveDraggable({
            revert: true
    });

DB から ajax を介してロードされる多数のドラッグ可能オブジェクトがあるため、これを使用しています。

私は今試しました：

    this.on("mousemove",".liveDraggable", function() {

しかし、うまくいきません。

更新 最後に Joel Purra の回答 (以下を参照) を介してこれに到達し、うまく機能します!!

(function ($) {
  $.fn.liveDraggable = function (draggableItemSelector, opts) {
    // Make the function chainable per good jQuery plugin design
    return this.each(function(){
      // Start the event listener for any contained draggableItemSelector items

    $(this).on("mouseenter", draggableItemSelector, function() {
        var $this = $(this);

        // If the item is already draggable, don't continue
        if($this.data("is-already-draggable") === true)
    {
      return;
    }
    // Make the item draggable
    $this.draggable(opts);

    // Save the fact that the item is now draggable
    $this.data("is-already-draggable", true);
     });
   });
  };
}(jQuery));

プラスセレクター

$(function() {     
  $("#my_div").liveDraggable(
   ".item",
    {
      revert: true
   });
});
4

2 に答える 2

0

ライブのドラッグアンドドロップイベントが必要な理由はわかりませんが、暗闇の中で突き刺して、数か月前に必要だったものと非常によく似ていると思います。

基本的に、ドラッグ可能なdivがいくつかありました。私はajaxを介して画面にさらにdivを追加していましたが、ドラッグ可能なイベントが発生した後にロードされたため、新しいdivはドラッグされません。指が交差した私はここにいます。

基本的に、ページに追加したアイテムの数に関係なく、ドラッグ可能な関数を何度も呼び出すことができるようにコードを設定することで、この問題を回避しました。この例を参照してください：http：//jsfiddle.net/BLMTw/

上記のリンクを試してみてください。[ボックスの追加]リンクをクリックして、ドラッグされない新しいボックスをドラッグしてみてください。次に、例に示されている行のコメントを外して、再試行してください。ドラッグ可能なものをもう一度発射したので、それは機能します。

私があなたのニーズを間違えた場合はお詫びします。

于 2012-09-05T16:29:44.767 に答える
0

編集:.liveDraggable(...)データベースから追​​加するすべてのものを含むコンテナーでカスタム関数を呼び出し.itemます。ただし、関数と呼び出しは書き直す必要があります。このコードを試してください。mouseenterまた、イベントはそれほど頻繁には実行されないため、mousemove機能を維持するのに十分な回数に切り替えました。

(function ($) {
  $.fn.liveDraggable = function (draggableItemSelector, opts) {
    // Make the function chainable per good jQuery plugin design
    return this.each(function(){
      // Start the event listener for any contained draggableItemSelector items
      this.on("mouseenter", draggableItemSelector, function() {
        var $this = $(this);

        // If the item is already draggable, don't continue
        if($this.data("is-already-draggable") === true)
        {
          return;
        }

        // Make the item draggable
        $this.draggable(opts);

        // Save the fact that the item is now draggable
        $this.data("is-already-draggable", true);
      });
    )};
   };
}(jQuery));

ページが読み込まれるときに関数を 1 回呼び出します。.itemこれは、 insideを追加することを前提としています<div id="my-item-container"></div>。

$("#my-item-container").liveDraggable(
  ".item",
  {
          revert: true
  });

元の回答: jQuery の CSS セレクターとjQuery のイベント名前空間の構文を混同している可能性があります。

.live(...)呼び出しでリッスンしているイベントは、イベントが明示的に名前空間化されている場合にmousemove.liveDraggableのみ.liveDraggableコードから発生します。例にはそのようなコードはありません。jQuery によってフィルター処理されるため、イベントをリッスンすることはできません。についても同様です.on(...)。

クラスを使用してドラッグ可能なものを区別.on("mousemove", ".liveDraggable", function ...)している場合は、引き続き使用できます。.liveDraggable

すぐにリスナーをオフにしているので、 も見てください.one(...)。

于 2012-09-05T16:37:28.507 に答える