如何使所有 contenteditable 子元素可拖动？

Question

我只是想要一个允许使用 jQuery 拖动所有 contenteditable 子元素的函数（没有外部 jQuery 插件）。

我在这里How do I make an element draggable in jQuery? 找到了这段有用的代码。

    function draggable(e){
    window.my_dragging = {};
    my_dragging.pageX0 = e.pageX;
    my_dragging.pageY0 = e.pageY;
    my_dragging.elem = this;
    my_dragging.offset0 = $(this).offset();
    function handle_dragging(e){
        var left = my_dragging.offset0.left + (e.pageX - my_dragging.pageX0);
        var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0);
        $(my_dragging.elem)
        .offset({top: top, left: left});
    }
    function handle_mouseup(e){
        $('body')
        .off('mousemove', handle_dragging)
        .off('mouseup', handle_mouseup);
    }
    $('body')
    .on('mouseup', handle_mouseup)
    .on('mousemove', handle_dragging);
}

这允许通过简单地输入$('.div').on("mousedown", draggable);来拖动任何元素

我还在这里Prevent contenteditable adding <div> on ENTER - Chrome 找到了这段有用的代码。

    $('div[contenteditable]').keydown(function(e) {
    // catch the enter key being pressed
    if (e.keyCode === 13) {
      $(this).find("*").off("mousedown.drag").on("mousedown.drag", draggable);
    }
  });

我打算将该函数附加到 contenteditable 在用户按下回车键时创建的所有子元素上，以使它们可拖动。

有人可以帮忙吗？

Answer 1

我推荐使用 jQuery UI 的 draggable 功能：

  <script>
      $(function() {
          $("div[contenteditable]").draggable();
      });
  </script>

这很简单，如果您想避免使用 jQuery UI 的未使用功能使您的页面过载，您可以在 jQuery UI 下载部分取消选择组件以减少它以满足您的需求。