Предисловие: Некоторое время назад я отвечал за операционные и управленческие фоновые проекты компании. Путем перетаскивания макета конфигурации на стороне ПК рабочего фона была достигнута конфигурация динамического интерфейса пользовательского интерфейса шаблона домашней страницы приложения, и страница была сгенерирована. Воспользуйтесь выходными, чтобы разобраться в том, что вы узнали о перетаскивании в то время. Статья будет время от времени обновляться и дополняться на основе ваших отзывов или совокупного роста вашего собственного опыта обучения. Если вы хотите узнать больше о разработке с помощью перетаскивания на ПК, пожалуйста, поставьте лайк и подпишитесь или соберите волну [bow].
Я видел это предложение в статье о Наггетс раньше:
Три режима разработки пользовательского интерфейса
1. Рукописные метки и коды стилей для создания страниц
2. Визуально перетаскивайте компоненты пользовательского интерфейса для создания страниц.
3. Непосредственно введите проект дизайна и выведите доступные страницы
К счастью, текущая компания находится на втором этапе разработки пользовательского интерфейса.
В то время было разработано небольшое количество веб-сайтов, на которые ссылались, и большое количество других веб-сайтов, на которые ссылались, были потеряны из-за отказа жесткого диска компьютера и не могли быть восстановлены.
Вышеупомянутые веб-сайты не очень важны.Я отсортировал для вас действительно важные и полезные ссылки на веб-сайты и разместил их в следующих статьях (разделенных на два типа демонстраций и учебных пособий).Нажмите на соответствующие ссылки, чтобы войти в соответствующую разработку учусь.
Причина публикации вышеупомянутого веб-сайта заключается в том, что я хочу сказать вам, что вы должны разобраться в своих потребностях, прежде чем выбирать плагины, найти плагины в Интернете в соответствии с вашими потребностями и открыть консоль, чтобы увидеть, подходит ли вам эффект. нужно, иначе загрузите его в После долгой отладки локально я обнаружил, что не могу добиться желаемого эффекта в конце, что было пустой тратой времени и энергии, и это не стоило потери. Поэтому, когда у меня будет время, я организую набор ментальных карт для подбора и подбора плагинов, а потом найду их в наггетсах или личных пабликах, и все вместе поделятся прогрессом.
Ну а без лишних слов приступим к основному блюду:
уровень сопротивления
Согласно информации, которую я искал, степень перетаскивания делится на три категории.Если вы знаете другие типы, поделитесь со мной.
1. Перетащите на вид
Например это:
Измените порядок позиционирования, обратите внимание на положение узла консоли, и соответствующего изменения нет. Этот вид перетаскивания является только эффектом взаимодействия с видом, а также простейшим эффектом перетаскивания.
Связь:
Демонстрационный адрес JS-Demo
2. Перетаскивание синхронных изменений между представлениями и узлами
2-1 JQ-UI
Например это:
Пожалуйста, обратите внимание на позицию узла консоли, которая соответственно изменилась. Этот вид перетаскивания может достичь эффекта синхронных изменений между представлением и узлом.
Связь:
Учебное пособие: Учебное пособие по документации китайского API JQ-UI
2-2 H5-draggable
Например это:
Атрибут draggable, предоставляемый h5, обратите внимание на положение узла консоли, также произошли соответствующие изменения.
Связь:
Учебник: Чжан Синьсюй - перетаскиваемый учебник
2-3 Выбор между JQ-UI и H5-dragable
И JQ-UI, и свойства перетаскивания H5 могут достичь желаемого эффекта, так что же нам выбрать? Лично я в итоге выбрал JQ-UI (конечно, для рефакторинга мы перешли на vue). Главный критерий — гибкость,Преимущество JQ-UI по сравнению с перетаскиваемыми атрибутами H5 заключается в гибкости.. Инкапсуляция метода в атрибуте draggable относительно фиксирована по сравнению с JQ-UI, и ее нелегко настроить.Так что, по моему опыту, если вы простой драг с малым спросом, свойства Draggable вам точно подойдут, ну а если ваш драг посложнее, то предлагаю сравнить с JQ-UI.
3. Синхронное изменение данных, представлений и узлов
Например: это
Подключаемый модуль vue Vue-Draggable также является самым популярным среди подключаемых модулей перетаскивания, связанных с vue, и наиболее распространенным элементом конфигурации.
Связь:
Учебник: github-vue-перетаскиваемый
Учебник: github-vue-Sortable(Плагин draggable основан на вторичной инкапсуляции sortabl, и будет очень полезно использовать draggable, чтобы узнать больше об этом)
Проектная практика
При рефакторинге мы использовали vue и выбрали этот перетаскиваемый плагин, который впоследствии оказался правильным. «Для достижения того же эффекта, что и с JQ, потребовалось как минимум вдвое меньше времени». Ведь Vue нужно только считать данные и сосредоточиться на бизнес-процессе и не нужно учитывать работу ноды, что все равно очень хорошо. Тот, кто его использует, все равно знает [язык наружу]. Хорошо, давайте опубликуем описание кода:
// 引入组件
import draggable from 'vuedraggable'
// 拖拽模块箱子到 => 可整理的箱子/ 垃圾箱子
<!--可整理的箱子-->
<div id="sortable" class='block'>
<draggable
class="sortable"
v-model="templateJson.child"
// 设置接收的拖拽
:options="{group:'people'}"
@remove="stop">
<module-template
:item="item"
:type="templateData.type"
v-for="(item, $index) in templateJson.child"
:key="$index">
</module-template>
</draggable>
</div>
<!--垃圾箱子-->
<div id="dusbtin">
<br/>垃<br/>圾<br/>箱
<draggable
v-model="templateJson.child"
:options="{group:'people'}">
<div class="btn"></div>
</draggable>
</div>
<!--模块箱子-->
<div id="module">
<draggable
class="dragArea"
v-model="moduleJson.child"
:clone="clone"
// 开始拖拽的箱子的options选项配置
:options="{group:{ name:'people', pull:'clone', put:false },sort:false}"
@end="onEnd">
<module-template
:item="item"
:type="templateData.type"
v-for="(item, $index) in moduleJson.child"
:key="$index">
</module-template>
</draggable>
</div>
clone означает копирование, sort: false означает, что сортировка не используется. Вы можете обратиться к инструкциям в учебнике для получения инструкций по настройке соответствующих свойств параметров в коде. Я не буду повторяться здесь.
резюме в одном предложении
Если это простое сопротивление, рекомендуется использовать атрибут перетаскивания H5.
Если это сложное перетаскивание, для его реализации рекомендуется использовать JQ-UI.
Если это зависит от данных, хорошим выбором будет использование плагина Vue-Draggable.
вот и все, вышеизложенное является кратким изложением всего моего текущего опыта перетаскивания проектов на стороне ПК. Если вы считаете, что это полезно для вашего развития, вы можете поставить лайк и собрать его.Если я написал что-то не так, я надеюсь, что я могу указать на это. Если у вас есть лучшие идеи или предложения, вы можете выдвинуть их, чтобы связаться со мной. Все развиваются и растут вместе. Спасибо [поклон].
общаться вместе?
У вас есть хорошие идеи, чтобы поделиться,Подпишитесь на официальную учетную запись WeChat yhzg_gz (нажмите, чтобы скопировать, добавьте официальную учетную запись в WeChat и вставьте ее), стремление к качеству кода, эффективное программирование - наша общая цель.
Написание статей может получить книгу асинхронного сообщества! Технические люди, которые любят читать, все здесьАсинхронное сообщество. я хочу читатьмир CSS, надеюсь, вам тоже понравится.Участвуйте в мероприятиях по обмену книгами.