a5hik / ng-sortable Goto Github PK

Hi I have multiple sortable lists in my view and want them limit to them self. So I thought just limit them to their wrapping section. But this ends up in a 'Maximum stack size exceeded'. Any hints how I can achieve the functionality of limiting every list?

containment: $ "section:contains('#{generic section text}')"

I have an app that makes available a pool of previously entered items for use (by drag and drop of course) in each of several sections. There can be a lot of items, so I need to sort, search, and filter the list. I'd also like to filtered selected items for the current section rather than remove from the pool.

Thanks.

I love this library, but as a noob I am having trouble getting an "Add Column" function that would be similar to the Add Card. Anyone implemented this and could share or could we include it in the demo? Thanks so much in advance!

Is there any way to make column to be scrollable ?

For example if i have 6 columns, it would be much easier if column can be scrollable so you can have like 5,6 cards and rest you can see when you scroll.
Then all of them would be visible on the screen

And check box on side and one for select all, for selecting multiple cards at once?

And thank you for this! :) You have done really great job!

Hi,

Thanks for the great library. We replaced angular-ui-tree for this one since we didn't need the tree functionality and yours allows to drop on the whole ul element.

However, we've come to a case where we would like to scroll when the dragged element is on the edge of the list (and ul with fixed height). How would you recommend we implement it?

Hello,

It looks like when attempting to use a complex object for as-sortable model it'll have issue finding index of source/dest items.
Suppose I want to use the following object as a model:

$scope.mySortableModel = [
    { id: 'asd', name: 'asd' },
    { id: 'qwe', name: 'qwe' },
    { id: 'zxc', name: 'zxc' },
]

...so:

<div id="source-inputs" as-sortable="sortOptions" ng-model="mySortableModel">
    ...
</div>

Drag first item to the second. It'll appear to work. Drag newly first item to the second (again). It won't work because of this line.

The indexOf function cannot search through complex objects.
Please consider a solution proposed here.

Hello,
it would be useful to pass the currently targeted "item" (= the item whose place we can drop the dragged one into) to the accept() callback. Recently that callback is informed only about the dragged handle and the whole "sortable" scope.
This feature could be utilized when eg. handling certain non-moveable items beside moveables.

Or maybe i missed something, in that case please just let me know how to get this extra info in the accept().

I much like this module btw, thanks for it.

Feature Request : Currently there is no single click on draggable items. If we have a tag inside the draggable items it does not work, could you code to enable quick click for tag items and prolonged click for drag ? Please check in to bower if you make this change. Thanks

I am trying to implement your great library in my project.

The problem is:
Sometimes if I drag an element, the preview free space is flickering between two states. It seems your directive is not sure, where to show the drop preview.

Unfortunately I can't reproduce this issue with your examples.
The examples always work fine.

Do you have a idea, what the problem might be? Could something in the CSS cause the problem?

Hi

When using the drag and drop in chrome, it works beautifully, however when in firefox, it seems to misbehave. The issue is - when I click down and start moving, it doesnt seem to invoke the placeholders and shift the images around. When I release the mouse click then it all seems to what is suppose to happen when the mouse is down. I think it has something to do with the 10px check. What I did was take the dragStart(event); out of thevar moveListen = function ... function and it all seems to work in FF now. This is around line 593 in the ng-sortable.js file.

I loose out on the 10px detect but for me that is not an issue. Just thought I would raise it with you.

I am still new to angular too, so my knowledge is very limited, thanks for a great plugin.

I use bootstrap for layout and wish to display a sortable list in a column that is not at the top/left of screen.

When I use containment to restrict the draggable area to this column, the dragged item displays with an offset from the mouse position equal to the offset of the containment area from the top/left of screen.

See plunkr for demonstration: http://plnkr.co/edit/7imDR03AKlotCs4SvyI0?p=preview

If you attempt to drag one of the items you will notice that the item jumps down and to the right of screen by the same distance that the column is from the top/left of screen.

Hello,

I'm following the manual on the home page of the project, however I cannot get it work.
It just displays the empty list and as far as I can see in the developer console, angular not iterating over the object.
When I remove ng-sortable directives (as-sortable/as-sortable-item/as-sortable-item-handle) it works.

What could be a reason of the problem?

Here is the plunk: http://plnkr.co/RTKL2LIhqmHbd6B6ciCA

As far as I can see on the demo page source: it uses the directives without the 'as-' prefix. When I remove the 'as-' prefix, it displays my list. However, sortable functionality does not work.

Hi,

First thanks for this module, works amazing.

My question is: How show I do to avoid the change between columns?

Hello, i have a list with elements whitch i want to sort. But when i drag element and reach end of visible area (but not of the list) my window doesn't scroll. It's sad.

I use sortable directive to sort images like this:

with custom css :

.media-images-sortable {
  margin-left : -10px;
  .sortable-item,
  .sortable-placeholder {
    display     : inline-block;
    width       : 124px;
    height      : 110px;
    margin-left : 10px;
  }
}

but I can't drag & drop other item up to first item

Please add support horizontal mode. Thank!

Could you remove the extra quote in the following:

The line should be

data-ng-repeat="item in items" data-sortable-item

Also please consider mentioning the style requirement for the top level container: display: inline-block" - only found that out when I looked at plunker.css example.

I am trying to do custom logic in a callback.accept function.
The problem is that I've just got Angulars sourceItemScope and destScope, but not the DOM element of the source and destination. It's not easily possible to get from the scope the element.
Ugly hack might be this:
http://stackoverflow.com/questions/23253506/get-dom-element-by-scope-id

What do I try?
If I drag an element into a drop area with a specific DOM id, it shouldn't drop really instead do something different.

Following values are incorrect:
"main": [
"dist/ng-sortable.js",
"dist/ng-sortable.min.js",
"dist/ng-sortable.min.css"
],

Reason:
I use grunt wiredep module and mentioned settings used for dependencies infection. As a result my result index looks like:
...

    <link rel="stylesheet" href="bower_components/angular-toastr/dist/angular-toastr.css" />
    <link rel="stylesheet" href="bower_components/angular-datepicker/dist/index.css" />
    <link rel="stylesheet" href="bower_components/ng-sortable/dist/ng-sortable.min.css" />

...

...
<script src="bower_components/ng-sortable/dist/ng-sortable.js"></script>
<script src="bower_components/ng-sortable/dist/ng-sortable.min.js"></script>
...

As you can see

1. ng-sortable css dependency contains "min", but another dep. don't have it...
2. ng-sortable js dependency duplicated

Solution:

Will be good to replace mentioned settings of bower.json to
"main": [
"dist/ng-sortable.js",
"dist/ng-sortable.css"
],

Where i will change to set the vertical drag functionality in the code. Another one doubt is one item is lock in a source column value.

I would like to move one item from one list to another, but item needs to stay in the original list. How do I do that?

THX

Hi,

it's possible in some way to have items listed horizontally? I've tried to do it but it seems not supported

Thanks
Alessandro

Hi guys!
How to make 'ng-sortable' work with nested sortable or disable inner sortable.

It would be awesome, if we have an option for "revert" in case we validate the move and it fails.
I am not sure whether the option is already there. I will put a placeholder issue item here.

Thanks in advance.

Can you add the un-minified css in the dist directory? This will make it easier to read, match the inclusion of the un-minified javascript and include it in the bower install. Thanks!

Hi,
the directive name "sortable" is too common so it may easy collide with other directives uses the same attribute for their own markup, for example the popular grid component https://github.com/esvit/ng-table also applies the "sortable" attribute for the TD markup and therefore the two great extension doesn't work together.
A suggestion would be to add some "namespace" before the directive name, eg. a5hik-sortable or something.

When I use this with a table there's a couple of issues:

1. The display: block for sortable-item and sortable-placeholder move all the columns in the table into the first row
2. Generally the default css is very opinionated and messes with the css I have for the table
3. It would be nice if there were some logic to detect if the drag and drop is a table then have it set the height of the dragging item dynamically to the drawn height of the original row. Additional you could loop through and dynamically set the table row width to same width of the original row.

Other than that, great angular control!

Hi,
In our code we use a directive to display the item contents. However, the code as it stands doesnt work for us as the scope of the element clicked is different. I've narrowed it down to the isDraggable function, and attached a fix for this:

                  sourceScope = elementClicked.scope();

                  // old code
                  // if (!sourceScope || !sourceScope.type || sourceScope.type !== 'handle') {
                  //         return false;

                  // look for the handle on the scope or parent scopes
                  isDraggable = false;
                  while (!isDraggable && sourceScope !== undefined) {
                      if (sourceScope.type && sourceScope.type === 'handle') {
                          isDraggable = true;
                      } else {
                          sourceScope = sourceScope.$parent;
                      }
                  }

If you like, I can attach a PR.

Cheers,
Steve

It seems source is missing ng-sortable.js file in master branch, could you please add it?

Following values are incorrect:
"main": [
"dist/ng-sortable.js",
"dist/ng-sortable.min.js",
"dist/ng-sortable.min.css"
],

Reason:
I use grunt wiredep module and mentioned settings used for dependencies infection. As a result my result index looks like:
...
bower:css
link rel="stylesheet" href="bower_components/angular-toastr/dist/angular-toastr.css"
link rel="stylesheet" href="bower_components/angular-datepicker/dist/index.css"
link rel="stylesheet" href="bower_components/ng-sortable/dist/ng-sortable.min.css"
endbower
...
bower:js
...
script src="bower_components/ng-sortable/dist/ng-sortable.js"
script src="bower_components/ng-sortable/dist/ng-sortable.min.js"
...
endbower

As you can see

1. ng-sortable css dependency contains "min", but another dep. don't have it...
2. ng-sortable js dependency duplicated

Solution:

Will be good to replace mentioned settings of bower.json to
"main": [
"dist/ng-sortable.js",
"dist/ng-sortable.css"
],

I use grunt-bower-task. When I want to install bower components by grunt bower:install command, I get an error like Fatal error: Unable to find suitable version for angular.

I use AngularJS by version 1.2.16 in my project.

I have this case where I am using a main list with subitems and when you click a main item you get its subitems who should be draggable.
http://plnkr.co/edit/6s03Gq

It's hard to explain exactly everything, so I made this plunkr and if you follow these steps you will see the problem:

• Drag the first 'subitem 0_0' down below 'subitem 0_1'
• Click 'Main item 1'
  • Drag the first item 'subitem 1_1' down to any other place
    --> You will see it not only took this item. but you will also have a subitem from the previous list being attached to it 'subitem 0_0'.

In this plunkr when you try to drag the items on the right. You can see it is working fine,
but when you try again, it doesn't change anymore.
http://plnkr.co/edit/6s03Gq

So basically when you drag 'subitem 0_0' below 'subitem 0_1' it will work fine,
But then when you try to drag it up again to its original position, 'subitem 0_1' will stay on top.
(It's the same when you first drag 'subitem 0_1' up and try to drag it down again.)

N.B.There is another issue in this plunkr, but I will address that in another issue. #59

It wourld be nice to be able of cloning the items.

If you disable the sorting with accepts, and you can clone the items, you transform the list in a draggable one very quickly.

I'm working on integrating hammerjs with your wonderful module, so I can identify whether it's a tap or a drag event on my web app.

Any suggestions where I should start? I've read the code, just not sure how the touchevent is implemented here. From what I understand, $window releases events, and you've hooked that into your module. Is that right? A quick explantation would be exceedingly helpful.

I would like to suggest to use always the Angular service $timeout(), instead of your function safeApply().
The disadvantages of safeApply:

• usage of angular variable this.$root.$$phase (variable not documented)
• it's not possible to do $scope.$apply() inside a callback if really needed

The advantages of of $timeout():

• you can use e.g. in the dragEnd() callback another $timeout() to apply some changes

Maybe I overlooked some problems with $timeout. It's asynchronous and might cause some other problems. At my project I am using $timeout and I haven't got any problems.

If I change the model in the dragEnd callback, I always get an error.

I suppose the problem is the usage of $apply() to start the dragEnd().

On Stackoverflow I've read that: "you should only use [$apply()] to migrate some data to Angular (integration with other frameworks), but never use this method combined with regular Angular code, as Angular will throw an error then." http://stackoverflow.com/questions/15112584/using-scope-watch-and-scope-apply

I am not an Angular expert. Maybe you could $broadcast the events?

it appears the module's css is being affected by bootstrap. note in this plunker how adding a sortable list inside a bootstrap column snaps dragged item to the top of the page....

http://plnkr.co/edit/0lP6wb

Is there a way, or can there be a way to use this with an Object as my model, instead of an Array?

Any ideas on how to make this work with a reverse filter like this?

angular.module('app')
  .filter 'reverse', ->
    return (items) ->
      return items.slice().reverse()

<ul data-sortable="board.dragControlListeners" data-ng-model="items">
   <li data-ng-repeat="item in items | reverse" data-sortable-item">
      <div data-sortable-item-handle></div>
   </li>
</ul>

Right now thinking I'd use a separate display array then use the callbacks to reorder the desired array in reverse. Thanks for the module btw! Good stuff!

Hi guys, we are using this component in version 1.1.1 and now we had a big problem because of bad tagging by SEMVER standards.

We had in bower.json version 1.1.* and with 1.1.2 should be only patches and no braking changes. You did BC with commit: 7331082 with renaming of the directive.

Can you consider to be more exact in semver naming convention in future?

This is more of a question rather than an issue - however:

I like ng-sortable -but it is giving me one problem and that is the incorrect selection of items when a user clicks anywhere on the page and then drags over the drag items.- example below:

I notice that your demo page prevents this from happening but looking at the html I can't see how it does it.

It would be helpful to have a option to enable/disable the sortable during runtime.

<div sortable="someOptions" is-enabled="true">...</div>

I'm trying to disable vertical drag/drop but allow horozontal drag/drop. The following code works except when I try to "undo" the drag before dropping in another column. If I still have the item picked up, and try to put it back to the original column, it doesn't allow the drop in the original column in the original position.

Is there a better way to disable vertical/same column drag/drop without having this issue?

accept: function (draggedItemScope, destListSortableScope) { //override to determine drag is allowed or not. default is true.
                return draggedItemScope.$parent.sortableScope != destListSortableScope; //disable drag for ranking/vertical

todos = [{priority: 1, name: 'todo1'}, {priority: 2, name: 'todo2'}]

Let's I want to orderBy priority... but every time I move an element I want the priority to be updated as well. Thus, the filter orderBy: 'priority' will revert the drag and drop changes... Any ideas to persist the new positions?

I am using 1.1.0 for horizontal support for a use case similar to #7 but there are multiple rows of boxes. The problem is due to the fact that placeholder height is set slightly larger than it should be in the code and it causes the next row of boxes to shift right.

When I delete the following line, it works perfectly:

placeHolder.css('height', $helper.height(scope.itemScope.element) + 'px');

Is this line really necessary?

From console:

TypeError: Cannot read property 'exp' of undefined
    at watchFnToHumanReadableString (<anonymous>:703:19)
    at k.$delegate.__proto__.$watch (<anonymous>:735:28)
    at link (http://localhost:9009/demo/dist/ng-sortable.js:502:17)
    at N (http://localhost:9009/demo/bower_components/angular/angular.min.js:54:372)
    at g (http://localhost:9009/demo/bower_components/angular/angular.min.js:47:256)
    at g (http://localhost:9009/demo/bower_components/angular/angular.min.js:47:273)
    at N (http://localhost:9009/demo/bower_components/angular/angular.min.js:54:313)
    at g (http://localhost:9009/demo/bower_components/angular/angular.min.js:47:256)
    at http://localhost:9009/demo/bower_components/angular/angular.min.js:46:377
    at http://localhost:9009/demo/bower_components/angular/angular.min.js:48:217 <ul class="cards card-list ng-scope ng-pristine ng-valid" as-sortable="kanbanSortOptions" ng-model="column.cards">

When I am trying to run tests via "grunt test" command:

grunt test --force
Running "karma:single" (karma) task
INFO [karma]: Karma v0.12.24 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chromium 37.0.2062 (Ubuntu)]: Connected on socket zuZ_Nyl0-h15MbwXCQ8p with id 37161878
Chromium 37.0.2062 (Ubuntu): Executed 0 of 0 ERROR (0.006 secs / 0 secs)
Warning: Task "karma:single" failed. Used --force, continuing.

Done, but with warnings.

Please, what can I try?

If I have a controller named sortableController in my application where I am using this directive, it overrides the sortableController in the directive.

When we have multiple sortable items in a row the width of the place holder should be set to the width of a single sortable item instead of the entire width of the container. Is there a way to set the width of the place holder specifically in one page with out affecting other pages?