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,欢迎补充

原创粉丝点击