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 ...
随机推荐
- js 页面小数相加精度问题
解决方法:把需要计算的数字升级(乘以10的n次幂)成计算机能够精确识别的整数,等计算完毕再降级(除以10的n次幂),这是大部分编程语言处理精度差异的通用方法. 比如计算0.33和5.2的和,则需要把( ...
- Nacos配置管理
一.在Nacos添加公共配置 二.项目中读取方式 1. 引入nacos-config依赖 首先,在要使用 nacos 来管理配置的服务中,引入nacos-config 依赖: <!--nacos ...
- 2022-06-01内部群每日三题-清辉PMP
1.采购部门要求项目经理提供一个项目的招标文件.这些文件中应该包含哪些内容? A.变更请求 B.选择的卖方 C.质量测量指标 D.建议邀请书 2.作为一个大型组织中关键项目的组成部分,阀门制造业务被外 ...
- vue的:class设置多个值
vue的:class设置多个值 :class="[{ 'labTilTemplate': item.editType == 11 }, { 'txtBold': item.bold == 1 ...
- HTML网址集合
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- hive知识点总结
hive知识点总结 1.什么是HIVE? 1.hive是hadoop生态圈的一个工具,提供一种结构化查询语言,可以查询HDFS或者其他文件系统上的文件. 2.hive操作: 1.hive一次使用命令: ...
- python菜鸟学习： 15 GUI界面化记事本
# -*- coding: utf-8 -*-import tkinter as tkdef getNewCreate(): passdef getCharcount1(sss): # 添加字数统 s ...
- Java语言中的复合运算符会自动进行类型转换
计算1/1-1/2+1/3+--+1/99-1/100 public class LoopControlExercise08{ public static void main(String[] arg ...
- jupyter notebook 切换环境
jupyter-notebook 中切换 conda 虚拟环境 介绍 jupyter notebook是anaconda中root目录中默认的python环境,如果要使拥创建的其他环境,则需要安装 ...
- solve--NAT模式下配置静态IP地址
第一步 打开虚拟机的虚拟网络编辑器: