<!DOCTYPE html>
<html>
<head>
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" rel="stylesheet" data-semver="1.10.0" data-require="jqueryui@*" />
<link data-require="bootstrap-css@*" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js" data-semver="1.10.0" data-require="jqueryui@*"></script>
<script src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13" data-require="angular.js@*"></script>
<script data-require="angular-ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="sortable.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="sortableController" ng-app="sortableApp" class="container">
<h2>AngularUI sorting with modal settings</h2>
<div class="row">
<div class="col-sm-6">
<ul id="list5" class="unstyled-list" ng-model="list5" ui-sortable="sortableOptionsWidgets">
<li class="ui-state-highlight" ng-repeat="item in list5" >
{{item.name}}
</li>
</ul>
<ul id="list1" ng-model="list1" ui-sortable="sortableOptions">
<li class="ui-state-default"
ng-repeat="item in list1 track by $index"
ng-show="item.name"
ng-model="list1">
<span class="drop-block-drag">move</span>
{{$index }} -- {{ item.name }} -- {{ item.content }}
<button
ng-click='deleteItem($index, item.id, "list1")'
class='btn btn-xs pull-right btn-danger'>X</button>
<button
class='btn btn-xs pull-right'
ng-click="open(item)">Edit</button>
<pre>{{ widgetOptions | json}}</pre>
<pre>{{ item |json }}</pre>
</li>
</ul>
<ul id="list2" ng-model="list2" ui-sortable="sortableOptions">
<li class="ui-state-default"
ng-repeat="item in list2 track by $index"
ng-show="item.name"
ng-model="list2" >
<span class="drop-block-drag">move</span>
{{$index }} -- {{ item.name }} -- {{ item.content }}
<button
ng-click='deleteItem($index, item.id, "list2")'
class='btn btn-xs pull-right btn-danger'>X</button>
<button
class='btn btn-xs pull-right'
ng-click="open(item)">Edit</button>
</li>
</ul>
<ul id="list3" ng-model="list3" ui-sortable="sortableOptions">
<li class="ui-state-default"
ng-repeat="item in list3 track by $index"
ng-show="item.name"
ng-model="list3" >
<span class="drop-block-drag">move</span>
{{$index }} -- {{ item.name }} -- {{ item.content }}
<button
ng-click='deleteItem($index, item.id, "list3")'
class='btn btn-xs pull-right btn-danger'>X</button>
<button
class='btn btn-xs pull-right'
ng-click="open(item)">Edit</button>
</li>
</ul>
<ul id="list4" ng-model="list4" ui-sortable="sortableOptions">
<li class="ui-state-default"
ng-repeat="item in list4 track by $index"
ng-show="item.name"
ng-model="list4" >
<span class="drop-block-drag">move</span>
{{$index }} -- {{ item.name }} -- {{ item.content }}
<button
ng-click='deleteItem($index, item.id, "list4")'
class='btn btn-xs pull-right btn-danger'>X</button>
<button
class='btn btn-xs pull-right'
ng-click="open(item)">Edit</button>
</li>
</ul>
</div>
<div class="col-sm-6">
<pre>
<div class="col-sm-6">
List 1
{{ list1 | json }}
List 2
{{ list2 | json }}
List 3
{{ list3 | json }}
List 4
{{ list4 | json }}
</div>
</pre>
</div>
</div>
</div>
</body>
</html>
var myapp = angular.module('sortableApp', ['ui.sortable', 'ui.bootstrap']);
myapp.controller('sortableController', function ($scope, $modal, $log) {
var tmpList = [];
$scope.list1 = [];
$scope.list2 = [];
$scope.list3 = [];
$scope.list4 = [];
var dragscreens = [
{ 'name': 'Text block',
'place': '1',
'position': '2',
'content': 'Text Block1',
},
{ 'name': 'Text block2',
'place': '1',
'position': '2',
'content': 'Text Block12',
}
];
$scope.sortingLog = [];
$scope.sortableOptions = {
placeholder: "placeholder",
connectWith: "#list1, #list2, #list3, #list4",
handle: '.drop-block-drag'
};
$scope.list5 = dragscreens.slice();
$scope.sortableOptionsWidgets = {
connectWith: "#list1, #list2, #list3, #list4",
placeholder: "placeholder",
helper: 'clone',
update: function (e, ui) {
if (ui.item.sortable.droptarget.hasClass('unstyled-list')) {
ui.item.sortable.cancel();
}
},
stop: function (e, ui) {
if ($(e.target).hasClass('unstyled-list') &&
e.target != ui.item.sortable.droptarget[0]) {
$scope.list5 = dragscreens.slice();
}
}
};
$scope.deleteItem = function($index, itemId, scope) {
$scope[scope].splice($index, 1);
};
$scope.open = function (widgetOptions) {
$scope.widgetOptions = angular.copy(widgetOptions);
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: ModalInstanceCtrl,
resolve: {
widgetOptionsLocal: function () {
return $scope.widgetOptions;
}
}
});
modalInstance.result.then(function (item) {
widgetOptions = item;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
var ModalInstanceCtrl = function ($scope, $modalInstance, widgetOptionsLocal) {
$scope.widgetOptions = widgetOptionsLocal;
$scope.ok = function () {
$modalInstance.close($scope.widgetOptions);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
/* Styles go here */
#list1,
#list2,
#list3,
#list4 {
border: 1px solid #008000;
min-height: 40px;
list-style: none;
}
.placeholder { background-color: #008000; border: solid black 1px; height: 10px;}
.drop-block-drag { cursor: move; }
<div class="modal-header">
<h3>{{widgetOptions.name}}</h3>
</div>
<div class="modal-body" >
<tabset justified="true">
<tab heading="Content">
<label>Content</label>
<textarea ng-model="widgetOptions.content" />
</tab>
</tabset>
<pre>
{{ widgetOptions | json }}
</pre>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok(widgetOptions)">Save</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
/*
jQuery UI Sortable plugin wrapper
@param [ui-sortable] {object} Options to pass to $.fn.sortable() merged onto ui.config
*/
angular.module('ui.sortable', [])
.value('uiSortableConfig',{})
.directive('uiSortable', [
'uiSortableConfig', '$timeout', '$log',
function(uiSortableConfig, $timeout, $log) {
'use strict';
return {
require: '?ngModel',
link: function(scope, element, attrs, ngModel) {
var savedNodes;
function combineCallbacks(first,second){
if(second && (typeof second === 'function')) {
return function(e, ui) {
first(e, ui);
second(e, ui);
};
}
return first;
}
var opts = {};
var callbacks = {
receive: null,
remove:null,
start:null,
stop:null,
update:null
};
angular.extend(opts, uiSortableConfig);
if (ngModel) {
// When we add or remove elements, we need the sortable to 'refresh'
// so it can find the new/removed elements.
scope.$watch(attrs.ngModel+'.length', function() {
// Timeout to let ng-repeat modify the DOM
$timeout(function() {
element.sortable('refresh');
});
});
callbacks.start = function(e, ui) {
// Save the starting position of dragged item
ui.item.sortable = {
index: ui.item.index(),
cancel: function () {
ui.item.sortable._isCanceled = true;
},
isCanceled: function () {
return ui.item.sortable._isCanceled;
},
_isCanceled: false
};
};
callbacks.activate = function(/*e, ui*/) {
// We need to make a copy of the current element's contents so
// we can restore it after sortable has messed it up.
// This is inside activate (instead of start) in order to save
// both lists when dragging between connected lists.
savedNodes = element.contents();
// If this list has a placeholder (the connected lists won't),
// don't inlcude it in saved nodes.
var placeholder = element.sortable('option','placeholder');
// placeholder.element will be a function if the placeholder, has
// been created (placeholder will be an object). If it hasn't
// been created, either placeholder will be false if no
// placeholder class was given or placeholder.element will be
// undefined if a class was given (placeholder will be a string)
if (placeholder && placeholder.element && typeof placeholder.element === 'function') {
var phElement = placeholder.element();
// workaround for jquery ui 1.9.x,
// not returning jquery collection
if (!phElement.jquery) {
phElement = angular.element(phElement);
}
// exact match with the placeholder's class attribute to handle
// the case that multiple connected sortables exist and
// the placehoilder option equals the class of sortable items
var excludes = element.find('[class="' + phElement.attr('class') + '"]');
savedNodes = savedNodes.not(excludes);
}
};
callbacks.update = function(e, ui) {
// Save current drop position but only if this is not a second
// update that happens when moving between lists because then
// the value will be overwritten with the old value
if(!ui.item.sortable.received) {
ui.item.sortable.dropindex = ui.item.index();
ui.item.sortable.droptarget = ui.item.parent();
// Cancel the sort (let ng-repeat do the sort for us)
// Don't cancel if this is the received list because it has
// already been canceled in the other list, and trying to cancel
// here will mess up the DOM.
element.sortable('cancel');
}
// Put the nodes back exactly the way they started (this is very
// important because ng-repeat uses comment elements to delineate
// the start and stop of repeat sections and sortable doesn't
// respect their order (even if we cancel, the order of the
// comments are still messed up).
if (element.sortable('option','helper') === 'clone') {
// restore all the savedNodes except .ui-sortable-helper element
// (which is placed last). That way it will be garbage collected.
savedNodes = savedNodes.not(savedNodes.last());
}
savedNodes.appendTo(element);
// If received is true (an item was dropped in from another list)
// then we add the new item to this list otherwise wait until the
// stop event where we will know if it was a sort or item was
// moved here from another list
if(ui.item.sortable.received && !ui.item.sortable.isCanceled()) {
scope.$apply(function () {
ngModel.$modelValue.splice(ui.item.sortable.dropindex, 0,
ui.item.sortable.moved);
});
}
};
callbacks.stop = function(e, ui) {
// If the received flag hasn't be set on the item, this is a
// normal sort, if dropindex is set, the item was moved, so move
// the items in the list.
if(!ui.item.sortable.received &&
('dropindex' in ui.item.sortable) &&
!ui.item.sortable.isCanceled()) {
scope.$apply(function () {
ngModel.$modelValue.splice(
ui.item.sortable.dropindex, 0,
ngModel.$modelValue.splice(ui.item.sortable.index, 1)[0]);
});
} else {
// if the item was not moved, then restore the elements
// so that the ngRepeat's comment are correct.
if((!('dropindex' in ui.item.sortable) || ui.item.sortable.isCanceled()) && element.sortable('option','helper') !== 'clone') {
savedNodes.appendTo(element);
}
}
};
callbacks.receive = function(e, ui) {
// An item was dropped here from another list, set a flag on the
// item.
ui.item.sortable.received = true;
};
callbacks.remove = function(e, ui) {
// Remove the item from this list's model and copy data into item,
// so the next list can retrive it
if (!ui.item.sortable.isCanceled()) {
scope.$apply(function () {
ui.item.sortable.moved = ngModel.$modelValue.splice(
ui.item.sortable.index, 1)[0];
});
}
};
scope.$watch(attrs.uiSortable, function(newVal /*, oldVal*/) {
angular.forEach(newVal, function(value, key) {
if(callbacks[key]) {
if( key === 'stop' ){
// call apply after stop
value = combineCallbacks(
value, function() { scope.$apply(); });
}
// wrap the callback
value = combineCallbacks(callbacks[key], value);
}
element.sortable('option', key, value);
});
}, true);
angular.forEach(callbacks, function(value, key) {
opts[key] = combineCallbacks(value, opts[key]);
});
} else {
$log.info('ui.sortable: ngModel not provided!', element);
}
// Create sortable
element.sortable(opts);
}
};
}
]);