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

I don't know your reasoning for wanting the live drag and drop events but Im going to take a stab in the dark and guess it something very similar to what I needed it for a few months back.

basically I had some div's that were draggable. I was adding more divs to the screen via ajax but because their loaded after the draggable event was fired, the new divs don't drag. Fingers crossed I'm right here.

I got around it by basically setting up my code in such a way that the draggable function could be called again and again no matter how many items I added to the page. See this example: http://jsfiddle.net/BLMTw/

Try the link above and you will see when you click the 'Add Box' link and try and drag the new box it doesn't drag. Now uncomment the line shown the example and try again. It works because I've fired the draggable again.

Apologies if Ive got your needs wrong.

Answer 2

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