客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称：angular-ui/ui-sortable开源软件地址：https://github.com/angular-ui/ui-sortable开源编程语言：JavaScript 100.0%开源软件介绍：UI.Sortable directive
This directive allows you to sort an array with drag & drop. Requirements
Single minified cdn link ~245kB and example with JQuery v1.x, required parts of JQueryUI v1.10, AngularJS v1.2 & latest angular-ui-sortable. Notes:
Installation
UsageLoad the script file: sortable.js in your application: <script type="text/javascript" src="modules/directives/sortable/src/sortable.js"></script>Add the sortable module as a dependency to your application module: var myAppModule = angular.module('MyApp', ['ui.sortable'])Apply the directive to your form elements: <ul ui-sortable ng-model="items">
<li ng-repeat="item in items">{{ item }}</li>
</ul>Developing Notes:
OptionsAll the jQueryUI Sortable options can be passed through the directive. myAppModule.controller('MyController', function($scope) {
$scope.items = ["One", "Two", "Three"];
$scope.sortableOptions = {
update: function(e, ui) { ... },
axis: 'x'
};
});<ul ui-sortable="sortableOptions" ng-model="items">
<li ng-repeat="item in items">{{ item }}</li>
</ul>When using event callbacks (start/update/stop...), avoid manipulating DOM elements (especially the one with the ng-repeat attached). The suggested pattern is to use callbacks for emmiting events and altering the scope (inside the 'Angular world'). ui-floatingui-floating (default: undefined)
To have a smooth horizontal-list reordering, jquery.ui.sortable needs to detect the orientation of the list. This detection takes place during the initialization of the plugin (and some of the checks include: whether the first item is floating left/right or if 'axis' parameter is 'x', etc). There is also a known issue about initially empty horizontal lists. To provide a solution/workaround (till jquery.ui.sortable.refresh() also tests the orientation or a more appropriate method is provided), ui-sortable directive provides a <ul ui-sortable="{ 'ui-floating': true }" ng-model="items">
<li ng-repeat="item in items">{{ item }}</li>
</ul>OR $scope.sortableOptions = {
'ui-floating': true
};<ul ui-sortable="sortableOptions" ng-model="items">
<li ng-repeat="item in items">{{ item }}</li>
</ul>ui-model-itemsui-model-items (default: This is the model related counterpart option of jQuery's items option. ui-preserve-sizeui-preserve-size (default: undefined) This is useful for elements that their size is dependent to other page characteristics.
A representative example of such cases are Attributes For Event HandlingTo handle events with html bindings just define any expression to listed event attributes. If you defined an attribute for this events and defined callback function in sortableOptions at the same time, the attribute based callback will be called first.
Expression works on update event. <ul ui-sortable ng-model="items" ui-sortable-update="expression" >
<li ng-repeat="item in items">{{ item }}</li>
</ul>On update event callBackFunction1 if called before callBackFunction2. $scope.sortableOptions = {
'update': callBackFunction2
};<ul ui-sortable="sortableOptions" ng-model="items" ui-sortable-update="callBackFunction1" >
<li ng-repeat="item in items">{{ item }}</li>
</ul>CancelingInside the $scope.sortableOptions = {
update: function(e, ui) {
if (ui.item.sortable.model == "can't be moved") {
ui.item.sortable.cancel();
}
}
};Notes:
update: function(event, ui) {
if (// ensure we are in the first update() callback
!ui.item.sortable.received &&
// check that its an actual moving between the two lists
ui.item.sortable.source[0] !== ui.item.sortable.droptarget[0] &&
// check the size limitation
ui.item.sortable.model == "can't be moved between lists") {
ui.item.sortable.cancel();
}
}jQueryUI Sortable Event orderSingle sortable demo Connected sortables demo For more details about the events check the jQueryUI API documentation. Integrating with directives doing transclusionWrap the transclusion directive element with the ui-sortable directive and set the myAppModule.controller('MyController', function($scope) {
$scope.items = ["One", "Two", "Three"];
$scope.sortableOptions = {
items: '.sortable-item'
// It is suggested to use the most specific cssselector you can,
// after analyzing the DOM elements generated by the transclusion directive
// eg: items: '> .transclusionLvl1 > .transclusionLvl2 > .sortable-item'
};
});<div ui-sortable="sortableOptions" ng-model="items">
<a-transclusion-directive>
<div ng-repeat="item in items" class="sortable-item">{{ item }}</div>
</a-transclusion-directive>
</div>Examples
Integrations
Reporting IssuesThe above pen's are provided as a good starting point to demonstrate issues, proposals and use cases. Feel free to edit any of them for your needs (don't forget to also update the libraries used to your version). TestingWe use Karma and JSHint to ensure the quality of the code. The easiest way to run these checks is to use grunt: npm install -g grunt-cli
npm install && bower install
gruntThe karma task will try to open Firefox and Chrome as browser in which to run the tests. Make sure this is available or change the configuration in Grunt ServeWe have one task to serve them all! grunt serveIt's equal to run separately:
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论