思路
–拖动元素得到位置确定元素对应的数据,在数组中位置–
代码部分
css样式
* {
margin: 0;
padding: 0;
}
#drag{
width: 300px;
}
.de-p {
font-size: 20px;
line-height: 80px;
text-align: center;
height: 80px;
width: 80px;
border: 1px solid #e2e2e2;
background-color: rgba(16, 15, 245,.5);
cursor: pointer;
color: antiquewhite;
float: left;
}
._absolute {
position: absolute;
opacity: 0.3;
}
._relative {
position: relative;
}
html
<div id="drag"></div>
js拖拽对象实例化
var list = [{
name: '1'
}, {
name: '2'
}, {
name: '3'
}, {
name: '4'
}, {
name: '5'
}, {
name: '6'
}, {
name: '7'
}, {
name: '8'
}, {
name: '9'
}]
var drag = new Drag('drag', list)
//九宫格
drag.init({
x: true,
y: true
},3)
//横向拖动
//drag.init({
// x: true,
// y: false
//})
//纵向拖动
// drag.init({
// x: true,
// y: false
//})
定义拖拽对象
function Drag(contentId, model_arr,prop) {
var $content;//拖拽元素的父元素
var $model_arr = model_arr;//绑定的数据
var $prop =prop||{
name: 'name',
id: 'id'
} //绑定数组中显示的属性值
var $direction = {
x: false,
y: true
}
var $lineNum=0
var _this = this
this.init = function (obj,num) {
if(obj){
$direction = obj
}
if(num){
$lineNum =num
}
setelement();
setconetent();
}
function setelement() {
$content = window.document.getElementById(contentId);
setclass($content, '_relative')
if (!$content) {
alert('找不到id为' + contentId + '的元素')
}
}
function setconetent() {
$content.innerHTML = ''
for (let i = 0; i < $model_arr.length; i++) {
let p = document.createElement('p');
// console.log($model_arr[i], $prop.name)
p.innerText = $model_arr[i][$prop.name];
p.setAttribute('index',i)
setclass(p, 'de-p')
_this.drag(p)
$content.append(p)
}
}
function setclass(ele, cname) {
ele.classList.add(cname)
}
// 注册拖拽事件
this.drag=function(element) {
var target = element
// 开始拖拽
function dragstart(e) {
console.log('开始拖拽',target)
var space = getlocation(e)
setclass(target, '_absolute')
settargetLocation(space, target)
dragmove()
}
// 拖拽中
function dragmove() {
console.log('拖拽中')
window.document.onmousemove = function () {
var space = getlocation(event)
settargetLocation(space, target)
}
}
// 拖拽结束
function dragend() {
var location_obj = {
x:0,
y:0
}
if($direction.x){
var left = parseInt(target.style.left)
location_obj.x = Math.round(left/target.offsetWidth);
location_obj.x = location_obj.x>0?location_obj.x:(0-location_obj.x)
}
if($direction.y){
var top = parseInt(target.style.top)
location_obj.y = Math.round(top/target.offsetHeight);
location_obj.y = location_obj.y>0?location_obj.y:(0-location_obj.y)
}
console.log(location_obj)
var loc;
if($direction.y&&!$direction.x){
loc = location_obj.y
}else if(!$direction.y&&$direction.x){
loc = location_obj.x
}else{
console.log($lineNum)
loc = location_obj.y*$lineNum+location_obj.x
}
console.log(loc)
var arr_index = target.getAttribute('index');
var tempObj = $model_arr.splice(arr_index,1)[0]
if(loc==0){
$model_arr.unshift(tempObj)
}else{
$model_arr.splice(loc,0,tempObj)
}
_this.init()
}
target.onmousedown = function (e) { dragstart(e) }
target.onmouseup = function () {
console.log('拖拽结束')
dragend()
}
}
// 计算鼠标相对父元素的坐标
function getlocation(e) {
var location_par = {
x: $content.offsetLeft,
y: $content.offsetTop,
}
var location_mouse = {
x: e.pageX,
y: e.pageY,
}
var space = {
x: location_mouse.x - location_par.x,
y: location_mouse.y - location_par.y
}
return space;
}
function settargetLocation(space, target) {
if ($direction.x) {
target.style.left = (space.x - 20) + 'px'
}
if ($direction.y) {
target.style.top = (space.y - 20) + 'px'
}
}
}