jQuery Drag And Drop Using Live Events with .On

Question

I have used this example for a Jquery Live Dragable:

jQuery Drag And Drop Using Live Events

But want to convert it to use the .on in jquery 1.7 tried all sorts of permutations can anyone help?

Here is my working code using .live to create a .livedragable method:

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

Here is the call to the livedraggable:

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

I am using this because I have a number of draggables that are loaded via ajax from a DB.

I have now tried:

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

but it doesn't work.

UPDATE Finally got to this via Joel Purra's answer (see below) and it works great!!

(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));

Plus the selector

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

Answer 1

Edit: I would call the custom .liveDraggable(...) function on a container that contains all .item that you will add from your database. The function and call needs to be rewritten though. Try this piece of code. I also switched to the mouseenter event, since it doesn't execute as often as mousemove - but enough times to keep functionality.

(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));

Call the function once, when your page loads. This assumes you will add your .item inside <div id="my-item-container"></div>.

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

Original answer: You might be mixing up the syntax for jQuery's CSS selectors and jQuery's event namespacing.

The event you are listening to in your .live(...) call, mousemove.liveDraggable is only fired from the .liveDraggable code if the event has been explicitly namespaced - and I don't see any such code in your example. Listening to the event won't work, as it will be filtered out by jQuery. The same goes for .on(...).

You can still use .on("mousemove", ".liveDraggable", function ...) if you are using the class .liveDraggable to distinguish your draggables.

Since you are turning off the listener right away, also have a look at .one(...).