select2拖动元素
来源:互联网 发布:淘宝刷单流程360 编辑:程序博客网 时间:2024/06/06 20:11
html代码
<select name="ids[]" id="select2" style="width:650px;" multiple="multiple">
<option value="value" title="title" >title</option>
.
.
.
</select>
JS代码
<script type="text/javascript">
$(document).ready(function(){
$("body").on("mousedown",'.select2-selection__choice',function(event){
var obj = $(this);
if(event.button==0){
gapX=event.clientX-obj.offset().left;
gapY=event.clientY-obj.offset().top;
$(document).bind("mousemove",move);
$(document).bind("mouseup",stop);
}
return false;
function move(event){
var moveto = event.clientX-gapX;
if(moveto>0){
var title1 = obj.attr('title');
var title2 = obj.next("li").attr('title');
if(title2){
$("#select2 option[title='"+title1+"']").insertAfter($("#select2 option[title='"+title2+"']"));
}
}else{
var title1 = obj.attr('title');
var title2 = obj.prev("li").attr('title');
if(title2){
$("#select2 option[title='"+title2+"']").insertAfter($("#select2 option[title='"+title1+"']"));
}
}
return false;
}
function stop(){
$(document).unbind("mousemove",move);
$(document).unbind("mouseup",stop);
}
})
})
</script>
点击select2选中的元素后,可使点中元素位置向后移动一位,需要加载JQ和select2,欢迎补充
- select2拖动元素
- 拖动元素
- select2
- select2
- select2
- select2
- select2
- 页面元素拖动
- 拖动VML元素
- javscript实现元素拖动
- FB4 元素拖动
- js touch拖动元素
- HTML元素的拖动
- html5元素拖动
- html5元素拖动
- HTML5 元素拖动
- 如何拖动DOM元素
- HTML元素拖动示例
- iOS开发RAC学习笔记(四)RAC常用的六个用法
- 当装了两个tomcat后,修改tomcat端口
- 在android和ios上使用kivy的requests库
- IP地址的正则表达式写法
- BeanPostProcessor
- select2拖动元素
- PMM使用Grafana告警
- 初学二周
- 排序算法集合 -7
- SIEM5.0 中显示不同类别日志
- 读《计算机程序设计艺术》卷1:基本算法(第3版)
- linux--如何查看文件内容具体的某一行数据
- Android webView 调试
- Unity之SerializeField(序列化字段)