Question

我已将此示例用于Jquery Live Dragable：

但是想要将它转换为使用。在jquery 1.7中试过各种排列可以有人帮忙吗？

这是我使用.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
    });

我正在使用它，因为我有许多可通过数据库中的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

我不知道你想要进行实时拖放事件的理由，但是我会在黑暗中进行刺激并猜测它与我几个月前所需要的东西非常相似。

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

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

尝试上面的链接，当您点击“添加框”链接并尝试拖动新框时，您将看到它没有拖动。现在取消注释示例中显示的行，然后重试。这很有效，因为我再次解雇了拖车。

如果我的错误需要，请道歉。

Answer 2

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

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

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

原始回答：您可能会混淆jQuery的CSS选择器和jQuery's event namespacing的语法。

您在.live(...)调用中正在收听的事件mousemove.liveDraggable只会在.liveDraggable代码中被触发，如果该事件已明确命名 - 并且我没有看到任何此类事件你的例子中的代码。听取这个事件是行不通的，因为它会被jQuery过滤掉。 .on(...)也是如此。

如果您使用课程.on("mousemove", ".liveDraggable", function ...)来区分您的可拖动者，您仍然可以使用.liveDraggable。

由于您立即关闭了听众，所以请查看.one(...)。

jQuery使用.On实时事件拖放

2 个答案: