拖放功能不能正常工作的角度JS [英] Drag and drop functionality not working angular js

问题描述

我想jQuery用户界面和角度JS的整合。我想拖放列表行。

所以我GOOGLE了它发现这个 http://jsfiddle.net/g/hKYWr/ 并有做同样的demo，但是当我使用最新的角，它给人的错误，我也用最新的jQuery UI的。结果
我创建模块UI，我仍然得到错误。那么，我做错了，我想拖只用+按钮行，换句话说，我不想拖累和整排的下降。我只是想，如果我可以将使用+，下降后我们可以得到活动下降？

http://plnkr.co/edit/qeN5LmrXSrwA4IOXOK9R?p=$p $ PVIEW

  app.controller（'dragcontr'，函数（$范围）{
    $ scope.list = [一，二，三，四有，五，六个一];
}）;
 

解决方案

好吧有一些错误，在你的应用程序：

1）您没有引用角UI指令，以便可排序是不可用的。

 ＆LT;脚本数据需要=角UI数据semver =0.4.0SRC =htt​​p://rawgithub.com/angular-ui/angular- UI /主/建设/角ui.js＆GT;＆LT; / SCRIPT＆GT;
 

2）你没有初始化UI作为您的应用程序指令：

  VAR应用= angular.module（'dragapp'，['ngRoute'，'UI']）;
 

3）您初始化错误的元素的排序。您附有标签的表元素，这使得 TBODY 元素排序。相反，你应该把它连接到 TBODY ，使 TR 标签排序。

 ＆LT; TBODY UI：排序=sortableOptions＆GT;
 

4）我加了一些排序选项，您的控制器，使glyphicon拖动手柄并下探后向您展示停止事件。

  $ scope.sortableOptions = {
      处理：.glyphicon加'，
      停止：功能（）{
         警报（'停止拖动'）;
      }
}
 

和它的所有工作plunkr在一起：
Plunkr演示

I want integration of jquery UI and Angular js. I want to drag and drop the list row.

So I googled it found this http://jsfiddle.net/g/hKYWr/ and have made same demo but when I use latest angular, it gives error, I also use latest Jquery UI.
I have created module with "ui", I am getting error still. So where I am doing wrong, I want to drag the row using only "+" button, in other words I don't want to drag and drop from whole row. I just wanted if I can drag and drop using "+", can we get event after drop?

plunker http://plnkr.co/edit/qeN5LmrXSrwA4IOXOK9R?p=preview

app.controller('dragcontr', function ($scope) {
    $scope.list = ["one", "two", "three", "four", "five", "six"];
});

解决方案

Ok there was some mistakes in your application:

1) You did not reference the angular-ui directive so the sortable wasn't even available.

<script data-require="angular-ui" data-semver="0.4.0" src="http://rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>

2) You did not initialize the ui as a directive on your app:

var app =angular.module('dragapp',['ngRoute', 'ui']);

3) You initialized the sortable on the wrong element. You attached the tag to the table element which makes the tbody elements sortable. Instead you should attach it to the tbody to make the tr tags sortable.

<tbody ui:sortable="sortableOptions">

4) I added some sortable options to your controller to make the glyphicon the drag handle and to show you the stop event after dropping.

$scope.sortableOptions = {
      handle: '.glyphicon-plus',
      stop: function(){
         alert('stopped dragging');
      }
}

And a working plunkr of it all together: Plunkr demo

这篇关于拖放功能不能正常工作的角度JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！