用jQuery實現可用鼠標創建窗口，用鼠標對窗口進行拖動。

https://jsfiddle.net/r4x1toz3/7/

但是有兩個問題不知道怎么解決：

1、創建完元素，，文字會呈被選中狀態，每創建一個窗口，所有窗口都會變成選中狀態(實際上我沒有實現這個，不知道怎么會有這種效果)

2、對元素進行拖動，但實際上拖動會出現禁止的圖標，需要點擊一下元素才能進行拖動

3、有的時候會莫名的卡？例如創建好窗口(即松開鼠標)窗口大小還會跟著鼠標動；拖動窗口放開鼠標，窗口位置還會跟著鼠標移動？

js代碼：

;(function(){

function SmartWin(area){

var _this=this;

this.area=area;//窗口繪制區域

this.dragging=false;//是否拖動

this.startX,this.startY;//鼠標按下時的位置,相對于文檔

this.posX,this.posY;//窗口拖動前的位置，相對于父元素

this.diffX,this.diffY//鼠標與窗口的差值

this.hasWin=false;

this.focusWin;

this.stauts;

//area相對于文檔的位置

this.aLeft=this.area.offset().left;

this.aTop=this.area.offset().top;

//鼠標按下

this.area.mousedown(function(e){

//無窗口，準備創建新窗口

if($(e.target).is(_this.area)){

_this.startX=e.pageX;

_this.startY=e.pageY;

_this.stauts="create";

var inner='

\

窗口名稱×

\';

_this.area.append(inner);

var wl=_this.startX-_this.aLeft;

var wt=_this.startY-_this.aTop;

$("#createWin").css({

"left":wl,

"top":wt

})

}

//有窗口

else{

//關閉窗口

if($(e.target).hasClass("smartWin")){

_this.focusWin=$(e.target);

}else{

_this.focusWin=$(e.target).parents(".smartWin");

}

if($(e.target).hasClass("close")){

}

//修改大小

else if($(e.target).hasClass("resize")){

}

//拖動窗口

else{

_this.posX=_this.focusWin.position().left;

_this.posY=_this.focusWin.position().top;

var zindex=$(".smartWin").length-1;

_this.focusWin.css("zIndex",zindex);

//差值

_this.diffX=e.pageX-_this.aLeft-_this.posX;

_this.diffY=e.pageY-_this.aTop-_this.posY;

_this.stauts="drag";

_this.focusWin.attr("id","dragWin");

}

}

//改變窗口大小

if($(e.target).hasClass("resize")){

_this.stauts="resize"

e.stopPropagation();

}

})

//鼠標移動

this.area.mousemove(function(e){

//設置窗口大小位置

if(_this.stauts=="create"){

var ww=e.pageX-_this.startX;

var wh=e.pageY-_this.startY;

$("#createWin").css({

"width":ww,

"height":wh

})

}else if(_this.stauts=="drag"){

console.log(555);

var wl=e.pageX-_this.aLeft-_this.diffX;

var wt=e.pageY-_this.aTop-_this.diffY;

$("#dragWin").css({

"left":wl,

"top":wt

})

}

})

$(document).mouseup(function(){

_this.stauts="";

_this.dragging=false;

_this.focusWin=null;

var cwin=$("#createWin");

var dwin=$("#dragWin");

if(cwin){

cwin.removeAttr("id");

}

if(dwin){

dwin.removeAttr("id");

}

})

}

SmartWin.init=function(objs){

objs.each(function(){

new SmartWin($(this));

})

}

window["SmartWin"]=SmartWin;

})()

總結

以上是生活随笔為你收集整理的linux 拖动图标有拖影_想要实现元素拖动效果，但是一拖动出现禁止的图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。