jQuery UI Sortable

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

  <head>
    <meta charset="utf-8" />
    <title>待办事项</title>
    <link data-require="bootstrap-css@3.0.2" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
    <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
    
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    
    <div ng-controller="ItemListController" class="container">
 
        <h4>重要</h4>
        <div class="list-group" data-priority="2">
            <div data-id="{{ item.id }}" ng-repeat="item in items | filter : {priority : 2}" class="row alert alert-warning">
                <div class="col-xs-8 item-content">{{ item.content }}</div>
                <div class="col-xs-4 text-right text-muted small">{{ item.timestamp | date : "yyyy-MM-dd"}}</div>
            </div>
        </div>
        <h4>普通</h4>
        <div class="list-group" data-priority="1">
            <div data-id="{{ item.id }}" ng-repeat="item in items | filter : {priority : 1}" class="row alert alert-success">
                <div class="col-xs-8">{{ item.content }}</div>
                <div class="col-xs-4 text-right text-muted small">{{ item.timestamp | date : "yyyy-MM-dd"}}</div>
            </div>
        </div>
        <div ng-show="items.length == 0">暂无事项!</div>
    </div>
    
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
    <script data-require="angular.js@1.2.2" data-semver="1.2.2" src="http://code.angularjs.org/1.2.2/angular.js"></script>
    <script src="script.js"></script>
  </body>

</html>

var app = angular.module("Task", []);

app.factory("items", function() {
    var items = [];
    for (var i = 0; i < 15; i++) {
        items.push({
            id: i,
            content: "item " + i,
            priority: parseInt(Math.random() * 1000, 10) % 2 + 1,
            timestamp: new Date()
        });
    }
    return items;
});

app.controller("ItemListController", ["$scope", "items",
    function($scope, items) {
        $scope.items = items;

        $(".list-group").sortable({
            connectWith: ".list-group",
            cursor: "move", // 鼠标
            placeholder: "alert alert-info", // 放置位置的样式
            revert: 20, // true, // 松开后的动画
            handle: ".item-content" // 可以拖动的位置

        }).disableSelection();

        $(".list-group:eq(0)").on("sortstart", function(event, ui) {
            var $this = $(this);
            var dataId = ui.item.data("id");
            var oldConnectWith = $this.data("connectWith");

            if (dataId > 10 && oldConnectWith == null) {
                var connectWith = $this.sortable("option", "connectWith");
                $this.data("connectWith", connectWith);
                $this.sortable("option", "connectWith", $(connectWith).not("[data-priority='1']"));
                $this.sortable("refresh"); // call this method to make the connectWith setting works for current sort.
            } else if (dataId <= 10 && oldConnectWith) {

                $this.sortable("option", "connectWith", oldConnectWith);
                $this.sortable("refresh");
                $this.removeData("connectWith");
            }
        });

    }
]);

/* Styles go here */