Question

这一次我花了一些时间来分析，然后再问。

问题：

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

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

因此，我将'contenteditable =“ true”'div更改为输入字段。

性能继续下降。

在网站上，我使用开发工具从所有子级中删除可编辑的内容，并且拖动时的表现十分完美。

可能的解决方案：

拖动开始时暂时删除属性“ contenteditable”或将其设置为“ false”，并在停止后添加反向：我只是不知道该怎么做，是否与开始时我对占位符高度所做的类似？

将需要执行以下操作的timetimeng：

$(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>

有什么想法吗？

非常感谢和热爱

格兰姆

-编辑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'
});

它不会将contentneditable应用于元素，我不知道为什么。

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

我将尝试解决这个问题并将答案发布在这里，欢迎大家帮助：D

真诚

格兰姆

-编辑2-

好的，忘记了停止功能的用户界面

stop: function(e, ui){}

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

真诚

格兰姆

Answer 1

好了！

首先，我尝试了over：and out：事件，但是它们并没有很好地起作用，所以我切换到只是查找每个小盒子，并在开始时将contentneditable设置为false；在停止时将contentneditable设置为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'
	});

干杯。

格兰姆

contenteditable导致jqueryui可拖动时滞后。拖动时暂时删除可编辑的内容？

1 个答案: