js拖拽功能元件例項

本例子是基於vue編寫，拖拽元件採用的是vue draggable

右側列表接收左側的拖動資料，並轉殖左側拖動資料的副本到本身列表中。

右側列表支援排序

npm install 安裝依賴

npm run serve 啟動服務

貼出** hello.vue

="fluid container"
>
="form-group form-group-lg panel panel-default"
>
="panel-heading"
>
="panel-title"
>sortable control<
/h3>
<
/div>
="panel-body"
>
="checkbox"
>
"checkbox" v-model=
"editable"
>enable drag and drop<
/label>
<
/div>
"button"
class
="btn btn-default" @click=
"orderlist"
>sort by original order<
/button>
<
/div>
<
/div>
="col-md-3"
>
="list-group" tag=
"ul" v-model=
"list" v-bind=
"dragoptions"
:move=
"onmove" @start=
"isdragging=true" @end=
"isdragging=false"
>
"transition"
:name=
"'flip-list'"
>
="list-group-item" v-
for=
"element in list"
:key=
"element.order"
>
class
="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'" @click=
" element.fixed=! element.fixed" aria-hidden=
"true"
>
<
/i>
}="badge"
>
}<
/span>
<
/li>
<
/transition-group>
<
/draggable>
<
/div>
="col-md-3"
>
"span" v-model=
"list2" v-bind=
"dragoptions2"
:move=
"onmove"
>
"no"
class
="list-group" tag=
"ul"
>
="list-group-item" v-
for=
"(element,index) in list2"
:key=
"element.order + '_' + index"
>
class
="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'" @click=
" element.fixed=! element.fixed" aria-hidden=
"true"
>
<
/i>
}="badge"
>
}<
/span>
<
/li>
<
/transition-group>
<
/draggable>
<
/div>
="list-group col-md-3"
>
}<
/pre>
<
/div>
="list-group col-md-3"
>
}<
/pre>
<
/div>
<
/div>
<
/template>
import draggable from
"vuedraggable"
;const message =
["vue.draggable"
,"draggable"
,"component"
,"for"
,"vue.js 2.0"
,"based"
,"on"
,"sortablejs"];
export
default
,data()
;}),
list2:
,      editable:
true
,      isdragging:
false
,      delayeddragging:
false};
},methods:);
},onmove()
},computed:
,        sort:
false
,        disabled:
!this
.editable,
ghostclass:
"ghost"};
},dragoptions2()
;},liststring()
,list2string()
},watch:
this
.$nexttick((
)=>);
}}};
<
/script>
.flip-list-move 
.no-move 
.ghost 
.list-group 
.list-group-item 
.list-group-item i 
<
/style>

group: 定義了兩個列表同屬乙個分組，分組間做相互拖動。

pull: 「clone」 代表左側單元的拖動採用拷貝方式，如果不設定該值，將採用移動的方式，即左側資料元素拖動到右側列表後，左側列表中的該資料元素會消失。

put: false 代表本列表不支援外部資料拖入。

sort: false 代表本列表不支援拖動排序。

js拖拽功能

html css mod mod hd mod corner jsvar mod document.getelementbyid mod var hd document.getelementbyid hd var corner document.getelementbyid corner funct...

JS拖拽元件開發

首先，看一下拖拽的原理。被拖拽元素位置的變化，left值的變化其實就是滑鼠位置水平方向的變化值，e.clientx 滑鼠左鍵按下時e.clientx。top值的變化其實就是滑鼠位置豎直方向的變化值，e.clienty 滑鼠左鍵按下時e.clienty。另外就是設定拖拽的範圍，上下左右不得超過父元素所...

使用js實現拖拽功能

通過監聽mousemove和mouseup事件實現拖拽功能 var screenwidth document.documentelement.clientwidth var screenheight document.documentelement.clientheight document mou...