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

这是对livedraggable的调用：

    $(".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
   });
});
4

2 回答 2

0

我不知道你想要实时拖放事件的原因，但我会在黑暗中试一试，猜测它与几个月前我需要的非常相似。

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

我通过基本上设置我的代码来解决它，无论我在页面中添加了多少项目，都可以一次又一次地调用可拖动函数。请参阅此示例：http: //jsfiddle.net/BLMTw/

试试上面的链接，当您单击“添加框”链接并尝试拖动它不拖动的新框时，您会看到。现在取消注释显示示例的行并重试。它有效，因为我再次触发了可拖动。

抱歉，如果我的需求有误。

于 2012-09-05T16:29:44.767 回答
0

编辑：我会.liveDraggable(...)在包含.item您将从数据库中添加的所有内容的容器上调用自定义函数。不过，函数和调用需要重写。试试这段代码。我也切换到了mouseenterevent，因为它执行的频率不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));

在页面加载时调用该函数一次。这假设您将添加您的.iteminside <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 回答