Jquery ui 使用角JS拖放发生故障_Jquery Ui_Angularjs

Jquery ui 使用角JS拖放发生故障

jquery-ui angularjs

Jquery ui 使用角JS拖放发生故障,jquery-ui,angularjs,Jquery Ui,Angularjs,我在一个任务分配板上工作，我在某些部门之间切换现有标签（手风琴）时遇到问题。。。当我使用jQuery accordion时，范围变量列表得到了正确更新，代码运行良好。但是当我使用angular js accordion时，手风琴标签的移动被复制 // main HTML content <!DOCTYPE html> <html ng-app="App"> <title>Task WhiteBoard</title> <head&

我在一个任务分配板上工作，我在某些部门之间切换现有标签（手风琴）时遇到问题。。。当我使用jQuery accordion时，范围变量列表得到了正确更新，代码运行良好。但是当我使用angular js accordion时，手风琴标签的移动被复制

//   main HTML content

 <!DOCTYPE html>
<html ng-app="App">

<title>Task WhiteBoard</title>
<head>
<meta charset="utf-8" />   
<meta name="description" content="AngularJS + jQuery UI Drag-n-Drop" />

    <link rel="stylesheet/less" type="text/css" href="css/main.less" />
    <link href="css/zippy.css" rel="stylesheet">
    <link href="css/jquery-ui-1.9.2.custom.min.css" rel="stylesheet"          
             type="text/css" />
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <script src="js/jquery-1.8.1.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>

    <script src="js/angular.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script> 
    <script src="js/less-1.1.6.min.js"></script> 
<meta charset="utf-8" />
<title>Angular Drag and Drop</title>
</head>


<body ng-controller="dndCtrl" ng-cloak>
<h3>Task Whiteboard</h3>


<div class='list1' droppable value='1' >    

<div class='header'>
    Free Tasks
</div>

<div class="below-header">

</div>

<div  ng-repeat="item in list1" data-index="{{$index}}" draggable>
    <div class="zippy" zippy-title="{{item.name}}"> 
            {{item.content.newLabel}}   <br/>
            {{item.content.desc}}   <br/>
            {{item.content.effort}} <br/>
            {{item.content.owner}}  <br/>
            {{item.content.issues}} <br/>   
            {{item.content.comments}}   <br/>
            {{item.content.dependency}} <br/>
    </div>  
</div>  
</div>  

<div class='list2' droppable value='2'> 

<div class='header'>
    Claimed Tasks
</div>

<div class="below-header">

</div>

<div ng-repeat="item in list2" data-index="{{$index}}" draggable> 
    <div class="zippy" zippy-title="{{item.name}}">
            {{item.content.newLabel}}   <br/>
            {{item.content.desc}}   <br/>
            {{item.content.effort}} <br/>
            {{item.content.owner}}  <br/>
            {{item.content.issues}} <br/>   
            {{item.content.comments}}   <br/>
            {{item.content.dependency}} <br/>
    </div>  
</div>  
</div>

<div class='list3' droppable value='3'>

<div class='header'>
    Completed Tasks
</div>

<div class="below-header">

</div>

<div ng-repeat="item in list3" data-index="{{$index}}" draggable>
        <div class="zippy" zippy-title="{{item.name}}"> 
            {{item.content.newLabel}}   <br/>
            {{item.content.desc}}   <br/>
            {{item.content.effort}} <br/>
            {{item.content.owner}}  <br/>
            {{item.content.issues}} <br/>   
            {{item.content.comments}}   <br/>
            {{item.content.dependency}} <br/>
        </div>  
</div>
</div>  


<div style="clear:both;">
    list 1 size : {{list1.length}}  <br/>
    list 2 size : {{list2.length}}  <br/>
    list 3 size : {{list3.length}}  <br/>
</div>
</body>
</html>



    //    services.js



//This makes any element droppable
//Usage: <div droppable></div>
App.directive('droppable', function ($compile) {
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        scope.$watch(function (value) {
            //This makes an element Droppable
            element.droppable({
                drop: function (event, ui) {
                var dragIndex =    
   angular.element(ui.draggable).data('index');

 if(angular.element(ui.draggable).parent().hasClass('list1') && 
  element.attr('value')=='2') {

 scope.list2.push(scope.list1[dragIndex]);
 scope.list1.splice(dragIndex, 1);
    } 
 else if (angular.element(ui.draggable).parent().hasClass('list2') &&  
   element.attr('value')=='3') {

                 scope.list3.push(scope.list2[dragIndex]);                          scope.list2.splice(dragIndex, 1);
                        //  alert("list2 size : "+scope.list2.length);
                    }
                    else if (angular.element(ui.draggable).parent().hasClass('list2') && element.attr('value')=='1') {
                        scope.list1.push(scope.list2[dragIndex]);                         
                        scope.list2.splice(dragIndex, 1);
                        //  alert("list3 size : "+scope.list3.length);
                    }
                    scope.$apply();
                }
            });
        });
    }
};
});

//zippy directive to give an accordion feel

App.directive('zippy', function(){
return {
    restrict: 'C',
    // This HTML will replace the zippy directive.
    replace: true,
    transclude: true,
    scope:{ title:'@zippyTitle' },
    template:'<div>'+
    '<div class="title">{{title}}</div>'+
    '<div class="body" ng-transclude></div><hr/>'+
    '</div>',
    // The linking function will add behavior to the template
    link: function(scope, element, attrs) {
        // Title element
        var title = angular.element(element.children()[0]),
        // Opened / closed state
        opened = true;
        // Clicking on title should open/close the zippy
        title.bind('click', toggle);

        // Toggle the closed/opened state
        function toggle() {
            opened = !opened;
            element.removeClass(opened ? 'closed' : 'opened');
            element.addClass(opened ? 'opened' : 'closed');
        }

        // initialize the zippy
        toggle();
    }
}
});


     //    In controller .js


    $scope.list1 = [
{ 
    name: 'Intelligent Design', 
    content:    {
        newLabel : 'Create New Label',
        desc : 'Add Description',
        effort : 'Burned effort',
        owner : 'Owner',
        issues : 'Issues',
        comments : 'Comments',
        dependency : 'Dependency'
    }
},  
{
    name: 'Good Artist\'s Copy', 
    content:    {
        newLabel : 'Create New Label',
        desc : 'Add Description',
        effort : 'Burned effort',
        owner : 'Owner',
        issues : 'Issues',
        comments : 'Comments',
        dependency : 'Dependency'
    }
},  

{
    name: 'Task Creation', 
    content:    {
        newLabel : 'Create New Label',
        desc : 'Add Description',
        effort : 'Burned effort',
        owner : 'Owner',
        issues : 'Issues',
        comments : 'Comments',
        dependency : 'Dependency'
    }
}]
$scope.list2 = [ 
    {
    name: 'Task4', 
    content:    {
        newLabel : 'Create New Label',
        desc : 'Add Description',
        effort : 'Burned effort',
        owner : 'Owner',
        issues : 'Issues',
        comments : 'Comments',
        dependency : 'Dependency'
    }
}]
$scope.list3 = [];

//主要HTML内容
任务白板
角拖放
任务白板
免费任务
{{item.content.newLabel}}

{{item.content.desc}}

{{item.content.efforce}}

{{item.content.owner}}

{{item.content.issues}}

{{item.content.comments}}

{{item.content.dependency}}

声称的任务
{{item.content.newLabel}}

{{item.content.desc}}

{{item.content.efforce}}

{{item.content.owner}}

{{item.content.issues}}

{{item.content.comments}}

{{item.content.dependency}}

完成的任务
{{item.content.newLabel}}

{{item.content.desc}}

{{item.content.efforce}}

{{item.content.owner}}

{{item.content.issues}}

{{item.content.comments}}

{{item.content.dependency}}

列表1大小：{{list1.length}}

列表2大小：{{list2.length}}

列表3大小：{{list3.length}}

//services.js
//这使得任何元素都可以拖放
//用法：
应用指令（'droppable'，函数（$compile）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
范围$watch（功能（值）{
//这使得元素可以拖放
可拖放元素({
drop：函数（事件、用户界面）{
变量dragIndex=
元素（ui.draggable）.data（'index'）；
if（angular.element（ui.draggable）.parent（）.hasClass（'list1'）&&
element.attr（'value'）=='2'）{
scope.list2.push（scope.list1[dragIndex]）；
范围列表1.拼接（dragIndex，1）；
} 
else if（angular.element（ui.draggable）.parent（）.hasClass（'list2'）&&
element.attr（'value'）=='3'）{
scope.list3.push（scope.list2[dragIndex]）；scope.list2.splice（dragIndex，1）；
//警报（“列表2大小：“+scope.list2.length”）；
}
else if（angular.element（ui.draggable）.parent（）.hasClass（'list2'）&&element.attr（'value'）='1'））{
scope.list1.push（scope.list2[dragIndex]）；
范围列表2.拼接（dragIndex，1）；
//警报（“列表3大小：“+scope.list3.length”）；
}
作用域：$apply（）；
}
});
});
}
};
});
//轻快的指令给人手风琴的感觉
App.directive（'zippy'，function（）{
返回{
限制：“C”，
//此HTML将替换zippy指令。
替换：正确，
是的，
作用域：{title:'@zippettle'}，
模板：“”+
“{{title}}”+
“”+
'',
//链接函数将向模板添加行为
链接：函数（范围、元素、属性）{
//标题元素
var title=angular.element（element.children（）[0]），
//打开/关闭状态
开放=真；
//点击标题可以打开/关闭zippy
title.bind（'单击'，切换）；
//切换关闭/打开状态
函数切换（）{
打开=！打开；
element.removeClass（打开？'closed'：'opened'）；
元素addClass（打开？'opened'：'closed'）；
}
//初始化zippy
切换（）；
}
}
});
//在controller.js中
$scope.list1=[
{ 
名称：“智能设计”，
内容：{
newLabel:“创建新标签”，
desc:'添加说明'，
努力：“燃烧的努力”，
所有者：“所有者”，
议题:"议题",，
评论：'评论'，
依赖项：“依赖项”
}
},  
{
名称：“好艺术家的作品”，
内容：{
newLabel:“创建新标签”，
desc:'添加说明'，
努力：“燃烧的努力”，
所有者：“所有者”，
议题:"议题",，
评论：'评论'，
依赖项：“依赖项”
}
},  
{
名称：“任务创建”，
内容：{
newLabel:“创建新标签”，
desc:'添加说明'，
努力：“燃烧的努力”，
所有者：“所有者”，
议题:"议题",，
评论：'评论'，
依赖项：“依赖项”
}
}]
$scope.list2=[
{
名称：'Task4'，
内容：{
newLabel:“创建新标签”，
desc:'添加说明'，
努力：“燃烧的努力”，
所有者：“所有者”，
议题:"议题",，
评论：'评论'，
依赖项：“依赖项”
}
}]
$scope.list3=[]；

添加一个please@asgoth这是小提琴…但是我对它的角度有一些问题…你的小提琴有两个错误：删除css部分的脚本，使用非缩小的角度版本。要使用缩小版，您需要正确地使用依赖项注入：@asgoth谢谢您的建议：）这是我在做了建议的修改后得到的结果…在fiddle中仍然没有angular的运气，尽管从本地服务器托管时看起来很好这是当前的fiddle。。。