Преместваеми елементи, които отдалечават други елементи при плъзгане, Javascript
Например щракнете върху елемент, задръжте бутона на мишката, плъзнете елемента, докато държите бутона на мишката, и след това го поставете на желаното място, като освободите бутона на мишката. Или техните сетивни колеги. За щастие това вече е добре развита територия.
Но сега е време да експериментирате, като потребителския интерфейс jQuery на Draggable (и други подобни техники), за да го направите още по-лесен.
Наскоро забелязах, че когато се опитвам да извърша определено действие (вижте заглавието на тази статия), не мога да го направя с помощта на JQuery UI. Но успях да го направя така.
Опитах се да пресъздам ефекта като в страничната лента на Keynote, където можете да плъзгате и пускате елементи, за да разменяте слайдове.
Ето как изглежда този ефект:
Можете да получите нещо много близо до това с някои основни елементи за конфигуриране на потребителския интерфейс на jQuery. Тук използваме метода на сортиране .
Той е създаден специално за сортиране на списъци, тъй като имаме нужда от тях. Тоест използва едновременно нещо подобно както на Drag, така и на Drop.
И основен HTML като този:
„Заместител“ в конфигурация е елемент (постигнат чрез въвеждане на име на клас), който се вмъква между слайдовете. Слайдът, който преместваме, се „хвърля“, ако отпуснете бутона на мишката.
Можете да го оформите както искате, като използвате CSS. Направих го да изглежда като правоъгълник със синя лента вляво, като в Keynote:
Проблемът е да извадим други слайдове от пътя, където искаме да поставим елемента. И на това място се появи слайдът ни.
Първо се опитах да разреша този проблем с анимация @keyframes, като увеличих височината на заместителя от 0 до височината на слайда и след това показах елемента на това място, използвайки режима на запълване.