自定义拖拽面板angular7_AngularJS实现的简单拖拽功能示例

本文实例讲述了AngularJS实现的简单拖拽功能。分享给大家供大家参考，具体如下：

www.jb51.net AngularJS拖拽

*{

padding:0;

margin:0;

}

.wei{

width:100px;

height:100px;

background: red;

position:absolute;

cursor: pointer;

/*left:0;top:0;*/

}

var app = angular.module('myApp',[]);

//自定义属性

app.directive("weiYi",function(){

return{

restrict :'A',//A属性,E标签,C类名,D注释

link :function(scope,element,attr){

attr.data=angular.equals(attr.data,"true");

//console.log(attr.data);

console.log(element);

element.on("mousedown",function(e){

var that = $(this);

console.log(attr.data);

if(attr.data){

$div=$("

");

console.log($div);

$div.css({"width":"100px","height":"100px","border": "2px dotted green","position":"absolute","left":that.offset().left,"top":that.offset().top});

$div.appendTo($("body"));

}

var x=e.clientX-$(this).offset().left;

var y=e.clientY-$(this).offset().top;

//console.log(x+":"+y);

$(document).on("mousemove",function(e){

if(attr.data){

$div.css({"left":e.clientX-x,"top":e.clientY-y});

}else{

that.css({"left":e.clientX-x,"top":e.clientY-y});

}

});

$(document).on("mouseup",function(e){

//console.log($div);

$(document).off();

if(attr.data){

that.css({"left":$div.offset().left,"top":$div.offset().top});

$div.remove();

}

})

})

}

}

});

app.controller('show',['$scope',function(scope$){

}]);

运行效果如下：

希望本文所述对大家AngularJS程序设计有所帮助。