Как сделать так, чтобы все contenteditable дочерние элементы перетаскивались?

Question

Мне бы просто хотелось, чтобы функция позволяла перетаскивать все contenteditable дочерние элементы с помощью jQuery (без внешних плагинов jQuery).

Я нашел этот полезный фрагмент кода здесь Как сделать перетаскиваемый элемент в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);

Я также нашел здесь этот полезный фрагмент кода Предотвращение допустимого добавления

при 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, когда пользователь нажимает клавишу enter, чтобы сделать их перетаскиваемыми.

Кто-нибудь может помочь?

Answer 1

Я рекомендую использовать функцию jQuery UI draggable :

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

Это очень просто, и если вы хотите избежать перегрузки вашей страницы неиспользуемыми функциями jQuery UI, вы можете отменить выбор компонентов враздел загрузки пользовательского интерфейса jQuery, чтобы сократить ваши потребности.