使用带有.On的实时事件进行jQuery拖放

Question

我已经将此示例用于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));

这是对直播的调用：

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

我之所以使用它，是因为我有许多可拖动文件，它们是通过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
   });
});

Answer 1

编辑：我会在一个容器上调用自定义.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));

在加载页面时调用该函数一次。这假设您将在<div id="my-item-container"></div>中添加.item。

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

原始答案：您可能混淆了jQuery的CSS选择器和jQuery的事件名称空间的语法。

您在.live(...)调用中侦听的事件，mousemove.liveDraggable仅在事件已明确命名的情况下从.liveDraggable代码中激发，而我在您的示例中看不到任何此类代码。监听事件将不起作用，因为它将被jQuery过滤掉。.on(...)也是如此。

如果使用类.liveDraggable来区分可拖动对象，则仍然可以使用.on("mousemove", ".liveDraggable", function ...)。

既然您要立即关闭侦听器，那么也可以查看.one(...)。

Answer 2

我不知道你想要现场拖放活动的原因，但我会在黑暗中试探一下，猜测它与我几个月前所需要的非常相似。

基本上我有一些可拖动的div。我通过ajax在屏幕上添加了更多的div，但因为它们是在触发可拖动事件后加载的，所以新的div不会拖动。祈祷我就在这里。

我基本上是通过这样一种方式来设置代码的，即无论我在页面上添加了多少项，都可以一次又一次地调用可拖动函数。请参见此示例：http://jsfiddle.net/BLMTw/

尝试上面的链接，当你点击"添加框"链接并尝试拖动它没有拖动的新框时，你会看到。现在取消对示例中显示的行的注释，然后重试。它起作用是因为我又开了一枪。

如果我误解了你的需求，我深表歉意。