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();


});

Here is my jsfiddle

Answer 1

如果为sortable元素创建处理程序可能会更好，因为它超过了click事件。我使用.draggable-area创建了一个元素，并在sortable handle option

上使用它

 $(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'
  });


});

Updated your fiddle

排序后不满意

1 个答案: