您好,登錄后才能下訂單哦!
也是之前做的一個(gè)功能,相對(duì)于之前的完美版本,目前手頭只有個(gè)最開始做的草稿版,只支持firefox,但是之前完美版本已經(jīng)找不到了,很悲催,這就是不知道總結(jié)的下場(chǎng)。
不過還是希望能夠留下一個(gè)功能稍微正常的版本,于是這次又重新檢查了一遍,略作修改,至少能兼容firefox和chrome,ie(只看過幾個(gè)版本),甚是粗略。
拖拽用戶到圈子范圍內(nèi)效果:
拖拽用戶到圈子范圍內(nèi)并放開鼠標(biāo)效果:
全部代碼可以去附件里找,這里只貼出主要邏輯:
$("li[id^='t']").Drag( { //鼠標(biāo)按下時(shí),先把被選中的用戶資料復(fù)制到拖拽框中,然后可以有一些相對(duì)的樣式變化 MouseDown:function(e) { uid = $(this).attr("id").replace(/t/,""); mflag=true; var scrolltop = parseInt($(document).scrollTop()); $("#dragon").fadeTo("fast",0.7); $("#dragon").show(); $("#dragon").css("left",(parseInt(e.clientX)-10)+"px"); $("#dragon").css("top",(parseInt(e.clientY)-10 + scrolltop)+"px"); $("#dragon").html($('#t'+uid).html()); }, //當(dāng)鼠標(biāo)移動(dòng)到或者移出某個(gè)圈子的范圍之內(nèi)時(shí),觸發(fā)該圈子的mouseover事件或mouseout事件 MouseMove:function(e) { if(mflag == true) { var scrolltop = parseInt($(document).scrollTop()); var mleft = mouse_pos[0] = parseInt(e.clientX); var mtop = mouse_pos[1] = parseInt(e.clientY); $("#dragon").show(); $("#dragon").css("left",(mleft-10)+"px"); $("#dragon").css("top",(mtop-10 + scrolltop)+"px"); $("div[id^='circle_sub_']").each( function() { var tmppos = $(this).offset(); tmppos.top=tmppos.top-scrolltop; if(mleft > tmppos.left && mleft < (parseInt(tmppos.left) + parseInt($(this).width())) && mtop > tmppos.top && mtop < (parseInt(tmppos.top) + parseInt($(this).height()))) { $(this).trigger("mouseover"); } else { $(this).trigger("mouseout"); } } ); } }, //鼠標(biāo)抬起時(shí),如果拖拽框在某個(gè)圈子范圍內(nèi),觸發(fā)添加圈子用戶的動(dòng)作 MouseUp:function(e) { if(mflag == true) { mflag = false; var scrolltop = parseInt($(document).scrollTop()); var mleft = parseInt(e.clientX); var mtop = parseInt(e.clientY); $("#dragon").fadeTo("fast",1); $("#dragon").hide(); if(uid > 0) { $("div[id^='circle_sub_']").each( function() { var tmpid = $(this).attr("id").replace(/circle_sub_/,""); var tmppos = $(this).offset(); tmppos.top=tmppos.top-scrolltop; if(mleft > tmppos.left && mleft < (parseInt(tmppos.left) + parseInt($(this).width())) && mtop > tmppos.top && mtop < (parseInt(tmppos.top) + parseInt($(this).height()))) { $("#sub_node_"+tmpid).trigger("add_node",[uid]); uid = 0; } } ); } } }, MoveObj:$("#dragon"), OffMask:true, OffMod:true, BindInBox:false } );
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。