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 ...
随机推荐
- pytest框架插件源码_关于钩子方法调用部分的简单理解（pytest_runtest_makereport）
前言: 因为想不明白写的pytest_runtest_makereport里的yield是怎么把结果传出来的?pytest是怎么调用的我们自己写的pytest_runtest_makereport方法 ...
- Cannot read properties of null (reading ‘insertBefore‘)
一.报错现象 vue3 + element plus 项目,本地启动时,页面进行所有操作都正常:部署到test环境后,数据驱动DOM变化的操作会导致如下报错. 二.可能原因及解决方案 经过分析出现报错 ...
- JAVA 【SM2】加密解密
JAVA [SM2]加密解密 前言:最近项目中必须用到SM2的加密解密 引入的Maven依赖 <dependency> <groupId>cn.hutool</group ...
- win10企业版在线转换成win10专业版
1.下载windows附件包,解压到C盘根目录 https://pan.baidu.com/s/19Zyrav9sriS9nFyJsM8ydQ 提取码:gsp6 2.运行命令 2.1.以管理员身份运行 ...
- Java-获取真实用户ip
1 import common.util.StringUtil; 2 import org.springframework.web.bind.annotation.ModelAttribute; 3 ...
- koa获取get和post的参数实例代码
1 const Koa = require('koa'); 2 const Router = require('koa-router');//引用koa-router 3 const KoaBody ...
- vue的增删改查（简单版）
<template> <div class="about"> <div> <input type="te ...
- Day21：尝试脱离相同ip连接
今日完成的任务: 1.尝试使用组员打包的jar,在cmd中配置后端. 但是最终还是出现了部分问题导致无法连接. 2.在gitlab中更新最终的前端代码(就不放图了). 明日计划: 1.研究一下jar包 ...
- 掌控安全学院SQL注入靶场延时注入（二）
单引号被转义了 尝试闭合 判断注入 利用盲注即可 or ascii(substr(database(),1,1))=119
- MATLAB基础—基础认识
数建-MATLAB(基础认识) 一些基本使用 clear all :清除Workspace中的所有变量 clc: 清除Command Window中的所有命令 注释:%%(空空格)多行注释 或 % 单 ...