排序后不能工作的内容

Question

排序后，可编辑内容不是在左键上工作，而是在右击下工作。为什么？

$(function(){

  $("#textTemplate").draggable({
    helper: "clone",
    zIndex: 2500
  });
  $( "#editorDesignView" ).droppable({
        accept: '#textTemplate',
      drop: function( event, ui ) {
        var html = '<div id="" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;">Add your text here.</p></div>';
  $(html).appendTo(this).hide().slideDown();

      }
    });
  $('#editorDesignView').sortable();


});

这是我的小提琴

Answer 1

如果您为可排序元素创建一个处理程序，可能会更好，因为它超过了click事件。我用.draggable-area创建了一个元素，并在可排序句柄选项上使用它

 $(function(){

  $("#textTemplate").draggable({
    helper: "clone",
    zIndex: 2500,
  });
  $( "#editorDesignView" ).droppable({
        accept: '#textTemplate',
      drop: function( event, ui ) {
        var html = '<div id="" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;">Add your text here.</p><div style="padding:20px;" class="draggable-area"></div></div>';
  $(html).appendTo(this).hide().slideDown();

      }
    });
  $('#editorDesignView').sortable({
      handle: '.draggable-area'
  });


});

更新你的小提琴