contenteditable导致jqueryui可拖动时拖延。拖动时暂时删除contenteditable？

Question

这次我花了一些时间来分析才会问。

问题：

我有几个div，其中包含几个'contenteditable =“true”'的孩子。

如果我在每个'contenteditable =“true”'div中添加大量文本，然后开始拖动它，我的性能就会下降。

所以我将'contenteditable =“true”'div更改为输入字段。

性能继续以同样的方式下降。

在网站上，我使用开发工具从所有孩子中移除了满足感，并且在拖动时表现非常完美。

可能的解决方案： 暂停删除属性“contenteditable”或在拖动开始时将其设置为“false”并在停止后添加反向：我只是不知道如何完成它，它是否与我在启动时对占位符高度所做的相似？

需要sometimeng做这样的事情： $(this).find('.twoxboximage,twoxboxheader,twoxboxtext').remove(attr("contenteditable")); 但我不知道确切的语法，这是我的HTML和可排序的JS。

$('#description_list').sortable({
cancel:'.smallbox',
axis:'y',
tolerance: 'pointer',
placeholder: "sortable-placeholder",
	
start: function(e, ui){
	ui.placeholder.height(ui.item.height());
	//code that removes every contentneditable="true" from specific children from dragged div
},
stop: function(){
	copycontent();
	//code that adds every contentneditable="true" from specific children from dragged div
}
});
		
$('#description_list').sortable({
  connectWith: 'smallbox-wrapper'
});

<div id="description_list" class="bigbox">
	<div class="smallbox-wrapper twoxboxicon" id="row1">
	<div class="widewrapper">
		<input type="button" class="swapbutton" value="⇔"><input type="button" class="deletebutton " value="X" title="Löschen" onclick="delete_row('row2')">
	</div>
	<div class="smallbox twob1">
		<div id="title" class="smallbox twoxboximage" contenteditable="true" placeholder="image.."></div>
		<div id="title" class="smallbox twoxboxheader" contenteditable="true" placeholder="header.."></div>
		<div id="title" class="smallbox twoxboxtext" contenteditable="true" placeholder="Text.."></div>
	</div>
	<div class="smallbox twob2">
		<div id="title" class="smallbox twoxboximage" contenteditable="true" placeholder="image.."></div>
		<div id="title" class="smallbox twoxboxheader" contenteditable="true" placeholder="header.."></div>
		<div id="title" class="smallbox twoxboxtext" contenteditable="true" placeholder="Text.."></div>
	</div>
	<div class="up"></div>
	<div class="down"></div>
	</div>
	
	
	<div class="smallbox-wrapper twoxboxicon" id="row2">
	<div class="widewrapper">
		<input type="button" class="swapbutton" value="⇔"><input type="button" class="deletebutton " value="X" title="Löschen" onclick="delete_row('row2')">
	</div>
	<div class="smallbox twob1">
		<div id="title" class="smallbox twoxboximage" contenteditable="true" placeholder="image.."></div>
		<div id="title" class="smallbox twoxboxheader" contenteditable="true" placeholder="header.."></div>
		<div id="title" class="smallbox twoxboxtext" contenteditable="true" placeholder="Text.."></div>
	</div>
	<div class="smallbox twob2">
		<div id="title" class="smallbox twoxboximage" contenteditable="true" placeholder="image.."></div>
		<div id="title" class="smallbox twoxboxheader" contenteditable="true" placeholder="header.."></div>
		<div id="title" class="smallbox twoxboxtext" contenteditable="true" placeholder="Text.."></div>
	</div>
	<div class="up"></div>
	<div class="down"></div>
	</div>
	
	... and so on
</div>

有任何想法吗 ？

非常感激和很多的爱

公克

--EDIT 1--

好的，所以我得到了这个KINDA工作，但我有两个问题：

     $('#description_list').sortable({
        cancel:'.smallbox',
        axis:'y',
        tolerance: 'pointer',
        placeholder: "sortable-placeholder",
        start: function(e, ui){
            ui.placeholder.height(ui.item.height());
            ui.item.find(".twoxboxheader, .twoxboximage, .twoxboxtext").each(function(){
                $(this).prop('contenteditable', false);
            });
        },
        stop: function(){
            copycontent();
            ui.item.find(".twoxboxheader, .twoxboximage, .twoxboxtext").each(function(){
                $(this).prop('contenteditable', true);
            });
        }
});

$('#description_list').sortable({
    connectWith: 'smallbox-wrapper'
});

它不会将可编辑的内容应用回元素，我不知道为什么。

此外，最好将'contenteditable ='false'应用于'＃description_list'中的每个'.smallbox-wrapper'，因为如果我拖动一个具有contenteditable'true'的项目，性能也会受到影响。

我会尽力解决这个问题并在这里发布答案，欢迎大家帮忙：D

诚挚

公克

--EDIT 2--

好的忘记了ui的停止：功能

stop: function(e, ui){}

将尝试将此例程应用于'#description_list'中的每个孩子并在此处发布答案。

诚挚

公克

Answer 1

好，知道了 ！

首先我试过了：out：out：事件但他们没有完成工作所以我切换到简单地找到每个小盒子并在开始时将contentneditable设置为false：并且在停止时为true：

这是代码，希望它能帮助别人。

	 $('#description_list').sortable({
			cancel:'.smallbox',
			axis:'y',
			tolerance: 'pointer',
			placeholder: "sortable-placeholder",
			//when starting to drag
			start: function(e, ui){
				ui.placeholder.height(ui.item.height());
				$('.smallbox').each(function(){
				
					//removing contentneditable from every affected div to improve performance drastically
					if ($(this).is('.twoxboxheader, .twoxboximage, .twoxboxtext')) {
					$(this).prop('contenteditable', false);
					};

				});
			},
			//when stopping to drag
			stop: function(e, ui){
				$('.smallbox').each(function(){
				
					//adding contentneditable to every affected div 
					if ($(this).is('.twoxboxheader, .twoxboximage, .twoxboxtext')) {
					$(this).prop('contenteditable', true);
					};

				});
				copycontent();
			}
	});
		
	$('#description_list').sortable({
		connectWith: 'smallbox-wrapper'
	});

干杯。

公克