angularjs结合html5实现拖拽功能

先来看看具体效果：

实现方法：

1.下载并引入开发

2.超文本标记语言代码：

！DOCTYPE html html lang=' en ' ng-app=' test ' head meta charset=' UTF-8 ' title html 5拖拽行为和开发的结合/title meta charset='utf-8'/脚本类型=' text/JAVAScript ' src=' http : js/angular。js /脚本样式。拖着。拖动停止{ display : inline-block；}/style/head body ng-controller=' main ' div class=' to-drag ' ul Li ng-repeat=' list。数据' ng-include=' ./左树。html ' '/Li/ul/div class='拖动-停止' ul Li ng-重复='右列表。数据' ng-include=' ./右树。html ' '/Li/ul/div/body/html 3。射流研究…

脚本类型=' text/JavaScript '让mod=angular。模块(' test '，[])；mod.controller('main '，['$scope '，function($ scope){ $ scope。list={ data : [{ id : 1，name: '22 '，child: [{ id: '1-1 '，name: '1-1_name-左}，{ id: '1-2 '，name: '1-2_name-左}] }]，dragstart:函数（项){ $ scope . client info=item } } $ scope。右列表={ data :[{ id : 1，name: '停止拖动，child: [{ id: '1-1 '，name: '1-1_name-右}，{ id: '1-2 '，name: '1-2_name-右}] }]，drop:函数（事件，项){事件。prevent default()；console.log('被拖动的元素：-'，$ scope。客户端信息)；console.log('当前节点：-',项目);//调用后端添加接口，实现真实的添加。}，dragover:函数（事件){事件。prevent default()；} } }]);var convertfirstupercase=function(str){ return str。替换(/(\ w)/，函数{ return s . touppercase()；});};rubhydrageventsitems={ }；棱角分明。foreach('拖动开始拖动输入拖动结束拖放离开拖动结束' .split(')、function(事件名){ var rubyEventName=' ruby ' convertfirstupper base(事件名)；rubhydrageventections[RuByeventname]=[' $ parse '，函数($parse) { //$parse语句解析器返回{ restrict: 'A '，compile:函数(ele，attr){ var fn=$ parse(attr[RuByeventname])；返回函数rubyEventHandler(作用域，ele) { ele[0].addEventListener(eventName，function(event){ if(event name==' drag over ' | | event name==' drop '){ event。prevent default()；} var回调=function () { fn(作用域，{ event : event })；};回调();});} } } }] });适度的指令(RuBhydrageVentDetections)；/script希望可以对大家有所帮助哦。好久都没写博客啦，嘻嘻最近变懒了，而且特别懒，哈哈哈哈，天热啦，大家多喝水哦，注意防暑。