प्रौद्योगिकी साझेदारी

uniapp मोबाइल टर्मिनल् उत्पादानाम् drag-and-drop संग्रहणं कार्यान्वितं करोति, तथा च पङ्क्तौ बहुविधं उत्पादं विलोपयितुं वाम-स्वाइपिङ्गस्य कार्यं!

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

अहं तं बहुकालात् न दृष्टवान् अहं अद्यैव एकं उत्पादं मिलितवान् तस्य प्रथमवारं उत्पादः निर्मितः आसीत् । सर्वदा केचन मानवविरोधिनो डिजाइनाः भवन्ति। तत्सत्यम्, शीर्षके drag-and-drop संग्रहः उत्पादं विलोपयितुं वाम-स्वाइप् च अस्ति । अस्य कार्यस्य सर्वाणि प्रमुखाणि एप्स् पश्यन् अहम् अस्मिन् डिजाइनेन सह किमपि न प्राप्नोमि सः निरन्तरं वदति स्म यत् सः मम कृते एतत् दर्शयिष्यामि इति अहं बहुकालं प्रतीक्षितवान्, भवतु सः तत् विस्मृतवान्।

एतादृशस्य माङ्गल्याः सम्मुखीभवने अहं तस्य सह संवादं कर्तुं अपि प्रयतितवान्, यथा शॉपिङ्ग्-शकटस्य उपयोगेन उत्पादानाम् विलोपनम् इत्यादीनि, तथा च केचन तर्काः परिवर्तयितुं यत् सर्वे स्वीकुर्वन्ति, परन्तु तस्य स्वकीयाः विचाराः आसन्, मया च चयनं कर्तव्यम् आसीत् तस्य आदरं कुरुत।

1. Drag and drop collection function इति कृत्वा स्थापयन्तु

दीर्घकालं यावत् drag-and-drop संग्रहकार्यस्य विषये अन्वेषणं कृत्वा, अहं एकेन मास्टरेन लिखितं drag-and-drop प्लग-इन् उपयुज्य, तदनुसारं च अनुकूलितवान् यतः मम आवश्यकतायाः कृते संग्रहस्य, पृष्ठस्य च प्रदर्शनस्य आवश्यकता नास्ति संग्रहस्य समये कूर्दति, अतः प्रयोगे केचन परिवर्तनानि भविष्यन्ति, परन्तु सामान्यतया अत्र प्लग-इन् इत्यस्य आधिकारिकजालस्थलं भवति ।

vue.draggable चीनी दस्तावेजीकरण - itxst.com

नोट्: विकासस्य समये, drag start and end events इत्यस्य निरीक्षणे त्रुटिः निवेदिता भविष्यति यदि एवम् अस्ति तर्हि अनुशंसितं यत् भवान् स्वयमेव तस्य समाधानं करोतु अथवा drag process इत्यस्य निरीक्षणार्थं मम समानं पद्धतिं उपयुञ्जीत इत्यादि एतत् अवलम्ब्य भिद्यते आवश्यकतानां विषये। अन्ते कोडं संलग्नं कुर्वन्तु:

  1. <template>
  2. 	<div id="app">
  3. 		<h1>商品列表</h1>
  4. 		<div class="container">
  5. 			<div class="row">
  6. 				<!-- @change="onDragEnd"  @start="start" @end="onEnd" :move="onMove" delay="1000" -->
  7. 				<div class="col-md-6">
  8. 					<draggable v-model="leftItems" :group="group" delay="1000"
  9. 						@change="onDragEnd" :move="onMove"
  10. 						animation="300"  dragClass="dragClass" ghostClass="ghostClass">
  11. <!-- 						<u-swipe-action :show="item.show" :index="index" 
  12. 							v-for="(item, index) in leftItems" :key="item.id" 
  13. 							@click="click" @open="open"
  14. 							:options="options"
  15. 						> -->
  16. 							<div class="item" v-for="(item, index) in leftItems" :key="item.id" >{{ item.name }}</div>
  17. 						<!-- </u-swipe-action> -->
  18. 					</draggable>
  19. 				</div>
  20.  
  21. 				<div class="col-md-6">
  22. 					<draggable v-model="rightItems" :group="group"
  23. 						@change="onDragEnd" :move="onMove">
  24. 						<div v-for="(item, index) in rightItems" :key="index" @longpress="aaa(index)" :class="['item',item.status==true?'shake':'']">{{ item.name }}</div>
  25. 					</draggable>
  26. 				</div>
  27. 			</div>
  28. 		</div>
  29. 	</div>
  30. </template>
  31. <script>
  32. 	import draggable from 'vuedraggable';
  33.  
  34. 	export default {
  35. 		components: {
  36. 			draggable
  37. 		},
  38. 		data() {
  39. 			return {
  40. 				disabled: false,
  41. 				btnWidth: 180,
  42. 				show: false,
  43. 				options: [
  44. 					{
  45. 						text: '删除',
  46. 						style: {
  47. 							backgroundColor: '#dd524d'
  48. 						}
  49. 					}
  50. 				],
  51. 				timerId: null,//计时器id
  52. 				group: {
  53. 					name: "itxst",
  54. 					pull: true, //可以拖出
  55. 					put: true, //可以拖入
  56. 				},
  57. 				leftItems: [{
  58. 						id: 1,
  59. 						show: false,
  60. 						status: false,
  61. 						name: '商品1'
  62. 					},
  63. 					{
  64. 						id: 2,
  65. 						show: false,
  66. 						status: false,
  67. 						name: '商品2'
  68. 					},
  69. 					{
  70. 						id: 3,
  71. 						show: false,
  72. 						status: false,
  73. 						name: '商品3'
  74. 					},
  75. 					{
  76. 						id: 4,
  77. 						show: false,
  78. 						status: false,
  79. 						name: '商品4'
  80. 					},
  81. 					{
  82. 						id: 5,
  83. 						show: false,
  84. 						status: false,
  85. 						name: '商品5'
  86. 					},
  87. 					{
  88. 						id: 6,
  89. 						show: false,
  90. 						status: false,
  91. 						name: '商品6'
  92. 					},
  93. 				],
  94. 				rightItems: [{
  95. 						id: 1,
  96. 						show: false,
  97. 						status: false,
  98. 						name: '商品1'
  99. 					},
  100. 					{
  101. 						id: 2,
  102. 						show: false,
  103. 						status: false,
  104. 						name: '商品2'
  105. 					},
  106. 					{
  107. 						id: 3,
  108. 						show: false,
  109. 						status: false,
  110. 						name: '商品3'
  111. 					},
  112. 					{
  113. 						id: 4,
  114. 						show: false,
  115. 						status: false,
  116. 						name: '商品4'
  117. 					},
  118. 					{
  119. 						id: 5,
  120. 						show: false,
  121. 						status: false,
  122. 						name: '商品5'
  123. 					},
  124. 					{
  125. 						id: 6,
  126. 						show: false,
  127. 						status: false,
  128. 						name: '商品6'
  129. 					},
  130. 				]
  131. 			};
  132. 		},
  133. 		onLoad() {
  134.  
  135. 		},
  136. 		methods: {
  137. 			click(index) {
  138. 				this.leftItems.splice(index, 1);
  139. 				this.$u.toast(`删除了第${index}个cell`);
  140. 			},
  141. 			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
  142. 			open(index) {
  143. 				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
  144. 				// 原本为false，再次设置为false会无效
  145. 				this.leftItems[index].show = true;
  146. 				this.leftItems.map((val, idx) => {
  147. 					if(index != idx) this.leftItems[idx].show = false;
  148. 				})
  149. 			},
  150.  
  151. 			start(e) {
  152. 				console.log(e, 'kasihi ');
  153. 			},
  154. 			onEnd() {
  155. 				console.log(e, '结束了 ');
  156. 			},
  157. 			onMove(e) { // keyi huanyuan
  158. 				clearTimeout(this.timerId)
  159. 				console.log('如果能监听到要在这里清楚计时器');
  160. 				return this.canFormSet()
  161. 			},
  162. 			aaa(index) {
  163. 				this.rightItems[index].status = true
  164. 				this.timerId = setTimeout(() => {
  165. 					this.rightItems[index].status = false
  166. 					clearTimeout(this.timerId)
  167. 				}, 500)
  168. 			},
  169. 			onDragEnd(event) {
  170. 				console.log(event);
  171. 				// if (event.newIndex !== event.oldIndex) {
  172. 				// const movedItem = this.leftItems[event.oldIndex];
  173. 				// this.leftItems.splice(event.oldIndex, 1);
  174. 				// this.rightItems.push(movedItem);
  175. 				// 判断是否可以形成集合跳转页面
  176. 				if (this.canFormSet()) {
  177. 					// 跳转到另一个页面的逻辑
  178. 					console.log('路由去往新的页面');
  179. 					// this.$router.push('/another-page');
  180. 				} else {
  181. 					// 如果不能形成集合，则复原
  182. 					console.log('复原');
  183.  
  184. 					// this.rightItems.pop();
  185. 					// this.leftItems.splice(event.newIndex, 0, movedItem);
  186. 				}
  187. 				console.log('6666');
  188. 				clearTimeout(this.timerId)
  189. 				//   } else {
  190. 				// console.log('else');
  191. 				//     // Revert the move if it's not a valid combination
  192. 				//     const movedItem = this.rightItems.pop();
  193. 				//     this.leftItems.splice(event.newIndex, 0, movedItem);
  194. 				//   }
  195. 			},
  196.  
  197. 			canFormSet() {
  198. 				// 如果可以形成集合，返回 true；否则返回 false
  199. 				return false; // 示例中默认返回 true
  200. 			}
  201. 		}
  202. 	};
  203. </script>
  204.  
  205. <style scoped lang="scss">
  206. 	.shake {
  207. 		width: 100px;
  208. 		height: 100px;
  209. 		background-color: red;
  210. 		transform-origin: center;
  211. 		animation: shake .5s infinite ease-in-out;
  212. 	}
  213.  
  214. 	@keyframes shake {
  215.  
  216. 		0%,
  217. 		100% {
  218. 			transform: rotate(-5deg);
  219. 			/* transform: translate(-50%, -50%) rotate(-5deg); */
  220. 		}
  221.  
  222. 		50% {
  223. 			transform: rotate(5deg);
  224. 		}
  225. 	}
  226.  
  227. 	.ghostClass {
  228. 		background-color: blue !important;
  229. 	}
  230.  
  231. 	.chosenClass {
  232. 		background-color: red !important;
  233. 		opacity: 1 !important;
  234. 	}
  235.  
  236. 	.dragClass {
  237. 		background-color: blueviolet !important;
  238. 		opacity: 1 !important;
  239. 		box-shadow: none !important;
  240. 		outline: none !important;
  241. 		background-image: none !important;
  242. 	}
  243.  
  244. 	.container {
  245. 		width: 100%;
  246. 		margin-top: 20px;
  247. 	}
  248. 	.row {
  249. 		width: 100%;
  250. 		display: flex;
  251. 	}
  252. 	.col-md-6 {
  253. 		width: 100%;
  254. 		// display: flex;
  255. 		// flex-wrap: wrap;
  256. 	}
  257.  
  258. 	.item {
  259. 		width: 100px;
  260. 		height: 100px;
  261. 		margin-left: 20px;
  262. 		border: 1px solid #ccc;
  263. 		padding: 10px;
  264. 		margin-bottom: 10px;
  265. 		background-color: #f9f9f9;
  266. 	}
  267. </style>

2. एकस्मिन् पङ्क्तौ बहुविध-उत्पादानाम् कृते स्लाइडिंग्-विलोपन-कार्यम्

उपरिष्टाद् कोडः सर्वेषां दृष्टः अस्ति, अहं तस्य उपयोगं कर्तुं योजनां करोमि उ-स्वाइप-क्रिया स्लाइडिंग् डिलीट् फंक्शन् कार्यान्वितुं, परन्तु केवलं एकां पङ्क्तिं स्लाइड् कृत्वा डिलीट् कर्तुं शक्नोति । अतः अहं स्रोतसङ्केतं अवलोकितवान्, ततः मम एपिफेनी अभवत् अहं बहुपङ्क्तयः सह विलोपनप्रभावसङ्केतः अपि किञ्चित् अनुकूलनं करिष्यामि, अहं भवद्भ्यः कोडं दास्यामि भवतः सन्दर्भः आशासे यत् भवतः सहायतां कर्तुं शक्नोति:

  1. <template>
  2.   <view class="container">
  3.     <movable-area class="box-info" 
  4. 		v-for="(item, index) in items"
  5.         :key="index">
  6.       <movable-view
  7.         style="width: 140px; height: 100px; background-color: #aa55ff;"
  8. 		:style="{widh}"
  9.         :x="index * 10"
  10.         :direction="'horizontal'"
  11.         :out-of-bounds="false"
  12.       >
  13.         <view class="product">
  14. 			<view style="width: 100px;">{{item}}</view>
  15. 			<view class="move" @click="removeShop">删除</view>
  16. 		</view>
  17.       </movable-view>
  18.     </movable-area>
  19.   </view>
  20. </template>
  21.  
  22. <script>
  23. export default {
  24.   data() {
  25.     return {
  26.       items: ['商品1', '商品2']
  27.     };
  28.   },
  29.   methods: {
  30.     removeShop(index) {
  31. 		alert('删除商品操作')
  32. 	}
  33.   }
  34. };
  35. </script>
  36.  
  37. <style scoped lang="scss">
  38. .container {
  39.   display: flex;
  40.   justify-content: center;
  41.   align-items: center;
  42.   height: 100%;
  43.   .box-info {
  44. 	display: flex;
  45. 	flex-wrap: wrap;
  46.   	height: 100px; 
  47.   	width: 100px; 
  48.   	background-color: #55ff7f;
  49.   	overflow: hidden;
  50.   	margin: 20px;
  51. 	.product {
  52. 	  display: flex;
  53. 	  justify-content: center;
  54. 	  align-items: center;
  55. 	  font-size: 14px;
  56. 	  color: #333;
  57. 	  .move{
  58. 	  	  background-color: #55aa00;
  59. 	  	  width: 40px;
  60. 	  	  height: 100px;
  61. 	  	  writing-mode: vertical-rl; 
  62. 	  	  display: flex;
  63. 	  	  justify-content: center;
  64. 	  	  align-items: center;
  65. 	  }
  66. 	}
  67.   }
  68. }
  69. </style>

व्यक्तिगत प्रोफाइल

सः ३० वर्षाणाम् अधिकं कालात् प्रौद्योगिक्याः शोधकार्यं कर्तुं समर्पितः अस्ति, तथा च जावा, लिनक्स, जावास्क्रिप्ट्, php, css इत्यादिषु विविधभाषासु प्रवीणः अस्ति, मुक्तस्रोतक्षेत्रे सः बहु योगदानं कृतवान् अस्ति विकासक दस्तावेजीकरणस्थानकं भविष्ये सन्दर्भार्थं प्रौद्योगिकीविकासे केचन विषयाः साझां कर्तुं सर्वे तत् पश्यन्तु

मम सम्पर्कसूचना

मेल