contenteditable, вызывающее jqueryui сортируемую задержку при перетаскивании.Временно удалить contenteditable при перетаскивании? - PullRequest
Новая
       14

contenteditable, вызывающее jqueryui сортируемую задержку при перетаскивании.Временно удалить contenteditable при перетаскивании?

0 голосов
/ 07 декабря 2018

На этот раз мне потребовалось некоторое время, чтобы проанализировать, прежде чем я задам вопрос.

ПРОБЛЕМА:

У меня есть несколько элементов div, в которых есть несколько детей с 'contenteditable = "true"'.

Если я добавлю много текста в каждый div" contenteditable = "true" ", а затем начну его перетаскивать, моя производительность резко упадет.

Поэтому я изменяю деления 'contenteditable = "true"' на поля ввода.

Производительность продолжает падать так же.

Находясь на сайте, я использую инструменты разработчика, чтобы удалить contenteditable от всех детей, и производительность при перетаскивании превосходна.


ВОЗМОЖНОЕ РЕШЕНИЕ:

Временно удалите атрибут «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'
});

Он не применяет contentneditable обратно к элементу, я не знаю, почему.

Кроме того, было бы лучше применить contenteditable = 'false' к каждому '.smallbox-wrapper' внутри '#description_list', поскольку на производительность также влияет, если я перетаскиваю элемент, имеющий contenteditable 'true'.

Я постараюсь решить эту проблему и опубликовать ответ здесь, каждый может помочь: D

искренне

Грамм

- РЕДАКТИРОВАТЬ 2 -

ОК, забыл пользовательский интерфейс для остановки: функция 

stop: function(e, ui){}

Попытается применить эту процедуру к каждому дочернему элементу внутри '#description_list' и опубликоватьответ здесь.

искренне

грамм

1 Ответ

0 голосов
/ 07 декабря 2018

Хорошо, понял!

Сначала я попробовал события over: and 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'
	});

Приветствия.

Грамм

...