7. 交换排序的阈值(swapThreshold)
1 <!DOCTYPE html>
2 <html lang="zh">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>拖拽</title>
8 <style type="text/css">
9 html,
10 body {
11 height: 100%;
12 background-color: pink;
13 margin: 0;
14 }
15
16 .row {
17 display: flex;
18 justify-content: space-around;
19 }
20
21 ul {
22 width: 40%;
23 list-style-type: none;
24 padding: 0;
25 }
26
27 #itxst>li {
28 padding: 10px 0;
29 margin-bottom: 2px;
30 }
31
32 .list-group-item {
33 background-color: white;
34 }
35
36 #itxst2>li {
37 padding: 10px 0;
38 margin-bottom: 2px;
39 }
40
41 .tinted {
42 background-color: yellow;
43 }
44
45 .blue-background-class {
46 background-color: skyblue;
47 }
48 </style>
49 </head>
50 <body>
51 <div class="row">
52 <ul id="itxst">
53 <li class="list-group-item">
54 <span class="handle"
55 style="display: inline-block;width: 10px;height: 10px;background-color: #87CEEB;"></span>
56 item2
57 </li>
58 <li class="list-group-item">
59
60 <span class="handle"
61 style="display: inline-block;width: 10px;height: 10px;background-color: #87CEEB;"></span>
62
63 item2
64
65 </li>
66 <li class="list-group-item filtered" style="background-color: red;">
67
68 <span class="handle"
69 style="display: inline-block;width: 10px;height: 10px;background-color: #87CEEB;"></span>
70
71 item2
72 </li>
73 <li class="list-group-item">
74 <span class="handle"
75 style="display: inline-block;width: 10px;height: 10px;background-color: #87CEEB;"></span>
76 item2
77 </li>
78
79 <li class="list-group-item">
80 <span class="handle"
81 style="display: inline-block;width: 10px;height: 10px;background-color: #87CEEB;"></span>
82 item2
83 </li>
84 </ul>
85
86 <ul id="itxst2">
87 <li class="list-group-item tinted">item1</li>
88 <li class="list-group-item tinted">item2</li>
89 <li class="list-group-item tinted">item3</li>
90 <li class="list-group-item tinted">item4</li>
91 <li class="list-group-item tinted">item5</li>
92 <li class="list-group-item tinted">item6</li>
93 <li class="list-group-item tinted">item7</li>
94 </ul>
95 </div>
96
97 <script src="https://cdn.bootcdn.net/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
98 <script type="text/javascript">
99 const el = document.getElementById('itxst')
100 const el2 = document.getElementById('itxst2')
101
102 new Sortable(el, {
103 group: 'shar',
104 swapThreshold: 0, // 交换排序的阈值，如果阈值为0，A可以把组件拖拽到B，但是B的组件不可以拖拽到A
105 invertSwap: true, // 如果设置为true，将始终使用反向交换区，不懂什么意思
106 animation: 150
107 })
108
109 new Sortable(el2, {
110 group: 'shar',
111 animation: 150
112 })
113 </script>
114 </body>
115 </html>
7. 交换排序的阈值(swapThreshold)的更多相关文章
- OpenCV图像的全局阈值二值化函数（OTSU）
cv::threshold(GrayImg, Bw, 0, 255, CV_THRESH_BINARY | CV_THRESH_OTSU);//灰度图像二值化 CV_THRESH_OTSU是提取图像最 ...
- Java实现线性阈值模型(Linear Threshold Model)
影响力传播的线性阈值模型: 网络中连接任意两个节点u,v之间的边都有权重,任意一个节点它的各个邻居节点的边的权重之和为1,即 N(v):neighbors of v. 网络中的节点分为已激活节点和未激 ...
- 【解决】查询无法完成，因为其包含的查找列数已超过管理员强制实施的查找列阈值。Error code=0x80070093; Error source=Groove
前因: 修改了SharePoint Server 2013 下面的文档库的名称,原先2个汉字,现在8个汉字.结果,SkyDrive Pro 就无法同步了,无论是停止重新同步还是手动填写进行同步都不可以 ...
- 带阈值的平滑l0范数加速稀疏恢复——同名英文论文翻译
原文链接:Thresholded Smoothed l0 Norm for Accelerated Sparse Recovery http://ieeexplore.ieee.org/documen ...
- 无线路由!RTS DTIM阈值、Beacon 周期如何设置多少可以加快路由
无线路由!RTS DTIM阈值.Beacon 周期如何设置多少可以加快路由 DTIM阈值是使用无线路由器时无线发送数据包的频率.1间隔最低,255最高[1] 但是想要使连接的设备达到最高运行速度,调 ...
- opencv6.2-imgproc图像处理模块之图像尺寸上的操作及阈值
接opencv6.1-imgproc图像处理模块之平滑和形态学操作,顺带说一句在opencv中的in-place操作就是比如函数的输入图像和输出图像两个指针是相同的,那么就是in-place操作了.比 ...
- Emgu学习之（四）——图像阈值
http://www.cnblogs.com/CoverCat/p/5043833.html Visual Studio Community 2015 工程和代码:http://pan.baidu.c ...
- 七种常见阈值分割代码(Otsu、最大熵、迭代法、自适应阀值、手动、迭代法、基本全局阈值法)
http://blog.csdn.net/xw20084898/article/details/17564957 一.工具:VC+OpenCV 二.语言:C++ 三.原理 otsu法(最大类间方差法, ...
- 【转】七种常见阈值分割代码(Otsu、最大熵、迭代法、自适应阀值、手动、迭代法、基本全局阈值法)
http://blog.csdn.net/xw20084898/article/details/17564957 一.工具:VC+OpenCV 二.语言:C++ 三.原理 otsu法(最大类间方差法, ...
- 纪念逝去的岁月——C/C++交换排序
交换排序 代码 #include <stdio.h> void printList(int iList[], int iLen) { ; ; i < iLen; i++) { pri ...
随机推荐
- 如何利用fooview实现钉钉自动打卡
我们平常遇到需要钉钉打卡的那种公司,经常要抢时间不敢晚起,有的公司还要扣钱,这样就很难受.本文教你一种行之有效的办法实现钉钉自动打卡. 有些人可能会用什么虚拟定位之类的工具,但是这种是很容易被钉钉发现 ...
- 实验四：开源控制器实践——OpenDaylight
实验要求: (一)基本要求: 1.利用Mininet平台搭建下图所示网络拓扑,并连接OpenDaylight控制器: 2.通过Postman工具调用OpenDaylight提供的API下发流表,实现拓 ...
- Java面向对象之instanceof和类型转换
instanceof instanceof(类型转换):利用此关键字可以判断某一个对象是否是指定类的实例 格式: 对象 instanceof 类 返回boolean型 - 如果某个对象是某个类的实例, ...
- kafak学习总结
高可用 多副本机制: 主副本和从副本,从副本只负责同步主副本数据,只有主副本进行读写. 高并发 网络结构设计 多路复用 多selector -> 多线程-> 多队列 高性能 写 把数据先写 ...
- 洛谷P8924题解
洛谷 P8924 题解 题目描述 给你一个函数,画出它的函数图像(* 表示经过该点,. 表示不经过该点),大小为 \(n\times m\),其中 \(x\) 的范围是 \([0,n-1]\),\(f ...
- golang 手写实现多台机器执行定时任务
多台机器,固定间隔每台分别去执行任务. package main import ( "fmt" "strconv" "time" ) fun ...
- 083_SFDC Limit(二) 及良好的开发习惯
关于常见开发中遇到的limit,应如何处理:https://developer.salesforce.com/page/Apex_Code_Best_Practices 链接内容很好,就不一一做解释 ...
- 读取excel等文件根据注解自动装填为实体类
问题:以前每次读取excel 都是根据第几列来装填实体类里面的属性.写起来很麻烦.还要判断. 思路: 1.因为每次读取excel 或者word表格 都能得到是第几列的数据,那么可以知道每列数据的ind ...
- QSS学习
padding:内边距 margin:外边距用法
- C#开发上位机常用
从深圳回内地几年了,突然想把之前项目中用到的东西做信合集,别忘记了!!!