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

Question

我只是想要一個 function ，它允許使用 jQuery （沒有外部 jQuery 插件）拖動所有 contenteditable 子元素。

我在這里找到了這段有用的代碼如何在 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);就可以在任何元素上進行拖動。

我還在這里找到了這段有用的代碼防止 contenteditable 添加 <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);
    }
  });

我打算將 function 附加到 contenteditable 在用戶按下回車鍵以使其可拖動時創建的所有子元素。

有人可以幫忙嗎？

Answer 1

我推薦使用 jQuery UI 的可拖動功能：

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

它非常簡單，如果您想避免使用 jQuery UI 的未使用功能使您的頁面超載，您可以取消選擇 jQuery UI 下載部分中的組件以減少它以滿足您的需求。