在网上看似乎用插件的实现比较多,由于不想在项目中引入过多插件,因此就自己花了两个钟头写了个demo。这个过程也让我梳理了js的事件对象。.
原因起于http://zhidao.baidu.com/link?url=AsqrCap7OBtaTVafTXUV6YiecOG9-arX1ZaS7QcyrqIsMEkZ46QnbJm7RfI1D473TKmRaeVWcrIdkqKwMyzeyK
网上这位兄台说select中的option不可拖动。
上代码:
HTML代码如下:
<div style="margin-top:150px;margin-left:150px">
所有成员
<select id="allMember" multiple="" size="auto" class="form-control select"
style="width:410px;font-size:12px;display:inline-block;">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<div style="display:inline-block; vertical-align:top;">
队长
<select id="teamLeader" multiple="" size="3" class="form-control select"
style="width:410px;font-size:12px;margin-bottom:20px;">
</select>
队员
<select id="teamMem" multiple="" size="auto" class="form-control select"
style="width:410px;font-size:12px;">
</select>
</div>
<button id="subTeam">提交</button>
</div>
JS代码
<script type="text/javascript">
$(function(){
var self = this;
this.curData = null;
this.$sorc = $('#allMember');
$("#allMember").on("mousedown","option",function(e){
self.curData = e.target;
});
$(document).on("mouseup",function(e){
var tmpDom = e.target.id;
if("teamLeader" != tmpDom && "teamMem" != tmpDom){//在放置区以外的地方就清空数据
var $dom = $(self.curData);
$dom.css("position","static");
self.curData = null;
return ;
}
if(null != self.curData){
var $dom = $(self.curData);
$dom.css("position","static");
$("#"+tmpDom).append($dom);
$dom.click(function(){
$(this).appendTo(self.$sorc);
});
}
self.curData = null;
});
//元素跟随移动效果
$(document).on("mousemove",function(e){
if(null != self.curData){
var $dom = $(self.curData);
$dom.css({position: "absolute",'top':e.pageY+10,'left':e.pageX+10,'z-index':2});
}
});
});
</script>
注:代码可以复制到环境中可以直接运行。有建议和疑问欢迎留言