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 ...
随机推荐
- vue中input触发方法中调用ajax，导致input失去焦点问题
发现在vue中监控input绑定的值,调用方法时,如果方法中有调用后端接口(使用Ajax),会导致input输入框失去焦点,这样导致的问题就是每输入一个字符,就要重新聚焦一次,可通过以下方式在方法中重 ...
- 题解[HEOI2013]SAO.md
题意 给定一棵树,边有方向.要给点重标号,使得边都由小编号指向大编号,求重标号方案数. \(n\le10^5\) 思路 有关树的计数.套路性考虑树形 DP. 设计状态 \(f_{u}\) 表示 \(u ...
- UF_CURVE_ask_arc_data圆弧角度
1 UF_CURVE_arc_t Obj_data; 2 UF_CURVE_ask_arc_data(tObject[i], &Obj_data); 3 double Sp = Obj_dat ...
- for循环axios套axios调用，同步调取
1.function getsdd(){}事件 async/await把异步进行设置成同步进行 var url = '/api/runtime/form/save'; function checkAd ...
- 暗黑破坏神2：Tab打开地图就变卡顿解决办法
我是VM虚拟机安装的WIN XP,系统镜像是:zh-hans_windows_xp_professional_with_service_pack_3_x86_cd_vl_x14.iso 以前也是这个系 ...
- 利用shell脚本来监控linux系统的负载与CPU占用情况
一.安装linux下面的一个邮件客户端msmtp软件(类似于一个foxmail的工具) 1.下载安装: http://downloads.sourceforge.net/msmtp/msmtp-1.4 ...
- 关于windows更新时间，设置更新时间段
https://jingyan.baidu.com/article/bad08e1eda412f09c85121c6.html https://www.dadighost.com/help/39372 ...
- Java基础——IO基础知识
字节流可以处理任何类型的数据(图片.MP3.视频等文件),字符流只能处理字符类型(文本文件)的数据.
- springcloud(三) - 负载均衡Ribbon
功能介绍 基本保证每个服务不同的ip接收到的请求数量是一样的,确保在微服务下没有没有那个服务器负载过多而另外一个闲置. IRule:根据规则获取制定的服务 规则列表 RoundRobinRule:轮询 ...
- Android蓝牙固件升级 DFU-OTA 固件升级
1.添加 依赖包: implementation 'no.nordicsemi.android:dfu:1.11.0' 2.DfuService类继承 DfuBaseService package ...