kamilkp / angular-sortable-view Goto Github PK

Hi,

I was wondering if it would be possible to add something like a delay or minimum move value to start dragging. I am using this on elements that also have click actions and once applied I very often drag instead of clicking. Do you think this is possible?

Cheers,
_Rj

I want to create something like this: http://screencast.com/t/b2GwaUiFTB2
How could I accomplish that?

Since I don't want to show all items but only the even ones, and not the first 2
I have added ng-if="( $index >= 2 ) && ( ( $index % 2 ) > 0 )"

When they are dragged, the one that is being moved ends up in the right place, but the other ones are not moved in turn to one of the positions that are visible.

The dragged item is just moved in the entire array.

But if you are not showing all items, what you would probably want is that the other items are still in one of the indexes that are "allowed by the ng-if", and that the items that are not shown will stay in the same place.

I could build some kind of fixing function that will be called at sv-on-sort, but it would be nice if it would work out-of-the-box.

I prefer draggable overlaps the droppable at least 50% in both directions and then I set option tolerance to element

opts.tolerance === 'element'

but it doesn't work and got error.
How to solve this?

Search by Outward Code: <input type="text" ng-model="search.Name">
<div sv-root class="multi-sortable">
<div class="sortable-container" sv-part="outWardCodes" style="padding:30px;border:1px solid red;">
    <div ng-repeat="item in outWardCodes| filter:search | limitTo:1:5" sv-element class="well multi">
        {{item}}
    </div>
</div>
<hr />
<div class="sortable-container" sv-part="outWardCodes1" style="padding:30px;border:1px solid red;">
    <div ng-repeat="item in outWardCodes1" sv-element class="well multi">
        {{item}}
    </div>
</div>

Now when I filter the results and only one item is in list and its like at the index of 12 then visible it will drag and drop that 12th item but after I leave the mouse the first in list at index one is actual replaced to the target and not the 12th.

Is there any hesitation to publish an npm package?

So the angular-ui/ui-select project does something a little unsavory and sets angular.element.prototype.closest to their own function. Unfortunately, their function uses an unconventional API for this function that returns a single object, rather than an array: https://github.com/angular-ui/ui-select/blob/55ae88bc15579bde92982e4feee825d110c440fa/src/common.js#L66-L83

This causes angular-sortable-view to blow up when calling closestElement()[0] because the returned object is not an array.

While I think the ui-select project is definitely doing something uncool here, I'm also curious if angular-sortable-view even needs to care whether angular.element.prototype.closest is defined. AFAICT everything should still work if you just drop the first part of the || here.

For now, my fix is to load angular-sortable-view before ui-select =/

Thoughts?

/cc @visnup

When using css styles like this:

.listOfElementsToSort .elementThatCanBeDragged:last-child{
    margin-bottom: 0;
}

The layout can break during dragging when the last element is moved.
The reason for this is that the dragged element gets cloned (the clone is hidden though), and the selector is therefore applied to the wrong element, resulting in an additional margin during dragging.

I didn't find a workaround for this issue.

Angular doesn't like binding DOM nodes to expressions.
https://docs.angularjs.org/error/$parse/isecdom?p0=journey.onTaskDrag($item,%20$part,%20$index,%20$helper

This picture shows whats happening http://screencast.com/t/W2mq6hfF6A1O
What could be the possible problem?

The js file adding overflow:hidden to .sortable-container element that I want to remove. How can I do that?

When i add a custom handle through sv-handle, i get the following error:

    TypeError: undefined is not a function
    at link (http://localhost:59633//js/lib/angular-sortable-view.js:491:45)
    at invokeLinkFn (http://localhost:59633//js/lib/angular.js:8111:9)
    at nodeLinkFn (http://localhost:59633//js/lib/angular.js:7623:11)
    at compositeLinkFn (http://localhost:59633//js/lib/angular.js:6991:13)
    at compositeLinkFn (http://localhost:59633//js/lib/angular.js:6994:13)
    at nodeLinkFn (http://localhost:59633//js/lib/angular.js:7618:24)
    at compositeLinkFn (http://localhost:59633//js/lib/angular.js:6991:13)
    at publicLinkFn (http://localhost:59633//js/lib/angular.js:6870:30)
    at boundTranscludeFn (http://localhost:59633//js/lib/angular.js:7009:16)
    at controllersBoundTransclude (http://localhost:59633//js/lib/angular.js:7650:18) <div class="queue-handle" sv-handle="" ng-click="toggleQueueDisplay(queue);">

I have the repeated list set up like this:

<ul id="queueList" sv-root sv-part="queues">
    <li class="queue" ng-repeat="queue in queues" sv-element>
        <div class="queue-header">
            <div class="queue-handle" sv-handle ng-click="toggleQueueDisplay(queue);">
                <div class="queue-blue-box">
                    <center><span>{{queue.queuemembers.queue_length}}</span></center>
                </div>
                <span class="queue-name">{{queue.queuemembers.name}}</span>
            </div>
            <div class="queue-toggler" ng-class="{active: queue.queuemembers.anyPhoneJoined}">
                <button ng-click="queue.queuemembers.anyPhoneJoined = !queue.queuemembers.anyPhoneJoined"><span class="queue-circle"></span></button>
            </div>
        </div>
    </li>
</ul>

The error occurs in this part of the plugin:

    module.directive('svHandle', function(){
        return {
            require: '?^svElement',
            link: function($scope, $element, $attrs, $ctrl){
                if($ctrl)
                    $ctrl.handle = $element.add($ctrl.handle); // support multiple handles
            }
        };
    });

I could really use some help with this, as i need the handle function. Right now i cannot press any buttons on my item, because the whole thing is draggable now.

Thanks,
Jonas.

When you have something similar to this structure:

<div sv-root="tasks-sv" sv-part="questionTasks">
    <div sv-element ng-repeat="task in questionTasks track by $index">
        {{task.description}}
        <!-- handle for reordering tasks-->
        <button sv-handle class="btn btn-warning btn-sm" tabindex="-1"><span class="glyphicon glyphicon-sort"></span></button>
        <!-- inside of every 'task', we have something to edit this task, and we'd like to use sv there also -->
        <div sv-root="options-$index" sv-part="task.options">
            <div sv-element ng-repeat="option in task.options track by $index">
                {{option.name}}
                <!-- handle for reordering options within a task -->
                <button sv-handle class="btn btn-warning btn-sm" tabindex="-1"><span class="glyphicon glyphicon-sort"></span></button>
            </div>
        </div>
   </div>
</div>

All of the sv-handles will reorder the outmost sortable.

I guess it should be possible to allow for either sv-handle="id", to make sure that the sv-handle knows to which sv it is linked, or that sv-handle only sorts the closest sv-root (when going 'up' in the tree).

Also, it doesn't seem to matter if I put that 'inner' editor inside of a new angular directive (I thought, if I create a new directive then it will probably work, but apparently it doesn't).

Awesome library, thank you so much for the effort you're putting into it.

When adding the sv-handle to an element within an sv-element, the following error is thrown:

TypeError: undefined is not a function
at module.directive.link (http://noteable.com/js/libs/angularSortableRepeat.js:490:30)

which is $ctrl.handle = $element.add($ctrl.handle); // support multiple handles

I thought it was my implementation, but it appears the online handle demo isn't working either (with the same error). This is in chrome 40.0.2214.91 with angular 1.2.1.

I'm going to keep digging in and will issue a pull request if I can figure it out, but I'm not hopeful. =]

When the parent container has a transform3d on it the entries have an offset and some other strange things happening when they get moved.

Here a codepen to show the issue:
http://codepen.io/anon/pen/ogdXLK

I should probably log two separate issues, but both are related to what I'm trying to accomplish, so I wanted to put all the info into one issue. I have a series of sections with a header and a body that I want to be able to drag and drop around. Because the body can be a bit big, I want to hide all the bodies while dragging, and then show them again after the dragging is done.

First, to hide them when dragging starts, I used sv-on-start. However, it doesn't seem to run the expression until I've stopped dragging. See this fiddle: http://jsfiddle.net/ttm849ef/
The bodies don't collapse until after the dragging stops.

I got around this using ng-mousedown. See this fiddle: http://jsfiddle.net/rLsvuk1r/
However, I'd rather use sv-on-sort as this is what it was made for (unless I'm misunderstanding something).

Secondly, I need a callback for when the dragging stops. sv-on-sort works great when the actual order changes, but if a user decides to not change the order after beginning to drag, I need a callback that will fire in this case. See this fiddle: http://jsfiddle.net/5xsr13ow/
If I move the section to a new spot, everything works like I want. However, if I leave it in the same place, the sv-on-sort doesn't fire, and everything remains hidden. I understand why a sv-on-sort callback wouldn't fire in this case, but I'm hoping for some kind of callback that can be called even if the order didn't change.

When you have to drag an element beyond the limits of the page or container, the list of elements should scroll when you hold the dragged item at the top or bottom of the list. They do not do so on FIrefox or IE11. Thought it was an implementation issue on my project but it seems the official demos on http://kamilkp.github.io/angular-sortable-view/#?tab=1 exhibit the same behavior.

Chrome and Safari don't have problems, only in the 2 browsers mentioned above.

hi,
Can i fire event after ordering?

Hi, although the module is pretty self explanatory and I got it working, I noticed that for the examples, you only provide the html code. Where is the angular code (initiating the scope object, for one)? I've tried a couple of these draggable modules and there are options (like cancelling drags) that need to be coded in angular, but I haven't been able to find any examples of that so far if your documentation.

Thanks!

When sorting on a zoomed page on touch device there are some offsets from the point of touch to the position of the helper.

When an element is inside the sv-element it cannot be clicked.
Lets say we have a button inside of the sv-element. This button cannot be clicked as the drag event catches it. The only solution if we want the whole element to be draggable but to keep the rest of the elements to be clicked, focused, etc, we need to create an invisible element (div) the same size as the parent but with z-index inferior to those elements that we need to interact with.

Uncaught TypeError: Cannot read property 'scope' of undefined

Uncaught TypeError: Cannot call method '$drop' of undefined

Is there any way to remove the window constraints? For example, If I'm moving a large element, the window borders make it awkward to move the element, especially if there are smaller elements nearby. I guess a related question is if it's possible to lower the opacity of the element as its being dragged?

What I'm doing is laying out large containers side to side with draggable blocks inside. I'm going horizontally, and adding containers and blocks. I don't know if this is expected or normal behavior,but the element won't move past a certain point, even if there's other containers and blocks outside the range. This may have to do with the window constraints, but I'm not sure. Any suggestions?

I was able to replicate the issue with the jsbin you created to demonstrate nested draggables over here by adding flexbox like this:

<div ng-app="app">
    <div sv-root>
      <div style="display:flex; flex-direction: row" sv-part="items" >
        <div style="width: 200px; min-width: 200px" ng-repeat="item in items" sv-element>
          <div sv-handle>{{item}}</div>
          <div sv-root>
            <div sv-part="item.items">
              <div sv-element ng-repeat="inner in item.items">
                {{inner}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>  
  </div>

In the readme it is written:

sv-element - this attribute should be placed on the same element as ng-repeat attribute. Its (optional) value should be an expression that evaluates to the options object.

Where can I find the list of options ? (other than by digging into the source code ?)

I'm using iOS 7.1 with Chrome and I'm using sv-handle on a Font Awesome icon. It appears that this library doesn't work at all with touch events. 😿

Firstly, great work!! This is perfect and truly simple to implement. I am new to this and found your documentation really helpful.

I was trying to make certain elements appear on clicking a check-box inside the ng-repeat'ed node. The angular-sortable-view assumes my attempts to click on the check-box as an attempt to reorder the ng-repeat'ed list.

I solved this by placing my display code ahead of the angular-sortable-view. This seems like a very rough solution though. Is there any other way, I can make my display scripts over-ride the angular-sortable-view in some situations?

when I scroll to bottom and drag scrolling to top it works fine, but when I drag scrolling to bottom it doesn't work. how to fix this?

Feature request:
In my current use case, it should not be possible to drag the last element produced by ng-repeat and it should also not be possible to move another element below the last one.

The first issue can be solved by hiding the sv-handle with ng-show, but it can't be avoided to drag other elements below the last one.

To achieve this, the sv-on-start and sv-on-stop functions could be modified to return false if the reorder is not allowed to happen.

thank you very much for plugin
and what about nested sorting?

How can i append clone to body instead above it?

I am trying to do some custom logic in the sv-on-start($item,$part,$index,$helper) event.
But I get the following error:

Uncaught Error: [$parse:isecdom] Referencing DOM nodes in Angular expressions is disallowed! Expression: startDrag($item, $part, $helper)
http://errors.angularjs.org/1.3.0/$parse/isecdom?p0=startDrag(%24item%2C%20%24part%2C%20%24helper)

Is there some other way to access the $helper?

I am using Angular 1.3, not sure if this is a new security constraint in that version.

I am getting this error upon start.
Error: [$compile:ctreq] http://errors.angularjs.org/1.2.28/$compile/ctreq?p0=svRoot&p1=svPart

I think it would be good if you provide the documentation to install this component since I've found nothing inside http://kamilkp.github.io/angular-sortable-view/#?tab=7 or the github page of this component it self.. or did I missed something ?

Why isn't angular listed as a dependency in bower.json?

var spliced = originatingPart.model(originatingPart.scope).splice(index, 1);

this error：
Uncaught TypeError: Object # has no method 'splice'

Hi, I've just found your great looking component, and am interested in using it within a current project that I am working on, however I do have a question regarding functionality I require.

Basically, I have a palette of components, and a container onto which I would like to be able to drag multiple copies of each component then reorder them. Is this type of functionality currently available in your component (at present I am using ui-sortable with cloning but would rather use your library if possible aas it would make for a much cleaner solution)

Hi, love this module. However, it would be nice to have a "disabled" attribute. For example, I have a table which is sortable, but ideally, it would be only sortable in "edit mode". It would be nice to disable the sorting dynamically (without resorting to hacks).

Firefox
TypeError: originatingPart.model(...).splice is not a function
line 251

var spliced = originatingPart.model(originatingPart.scope).splice(index, 1);

originatingPart.model(originatingPart.scope) - not array.

Sorry. my english is bad

Hey,
Thanks for this lib.
For some reason, when I drag over the first item, I cannot drop before the first item. not clear why.
Here is some sanitized code, thanks

    <div id="feed" sv-root>
        <ul class="collection_items" sv-part="model.collectionItems">
            <div sv-placeholder >
                <div class="customPlaceholder">Drop here</div>
            </div>
            <li
                ng-repeat="item in model.collectionItems "
                class="board_item"
                ng-class="{'add_on': $root.clicked[$index], 'selected': selectedItem.id === item.id,'video':item.type=='video', on_edit: !$root.final}"
                id="item_{{item.id}}"
                ng-if="isEmpty(item) || !$root.final"
                sv-element
                >
                                content goes here
                          </li>

....

I'm using Mobile Angular UI to properly show everything on a mobile screen.
In my app, I'm showing some lists in a so-called scrollable.

I also want the elements in this list to be sortable, so I added angular-sortable-view.

This however doesn't seem to work; if I exclude the scrollable everything works just fine.

Is there anything I can to to make it work with scrollable too?

Information on the scrollable:
http://mobileangularui.com/docs/#mobile-navbar-layout

Thanks in advance!

Module won't load, mainly due to package.json not having a property (main) that points to the main script file. Can you sort this easily or do you want me to do a PR for it?

how to sort static elements that's not create by ng-repeat and a ng-repeat elements ?
such as:

<ul sv-root>
 <li sv-element>11111</li>
 <li sv-element>11111</li>
 <li sv-element>11111</li>
<li ng-reapt="a in items" sv-element>
{{a}}
</li>
</ul>

Anyway to change cursor to move while I dragging an item?

First of all, thanks for the great library. Is there a way to make an element conditionally draggable? I am using ui.bootstrap.accordion and would like to make the elements sortable only when closed.

I've tried using the status.open model that the accordion populates as the expression for sv-element and it seems to have the desired effect, but probably just because it induces an error when I click inside an open panel (Uncaught TypeError: Object.keys called on non-object) which seems to be coming from here:

                    var opts = $parse($attrs.svElement)($scope);
                    opts = angular.extend({}, {
                        tolerance: 'pointer',
                        revert: 200,
                        containment: 'html'
                    }, opts);

When trying to use this in a modal that is relative the sortable elements display incorrectly. This is due to that fact that it initially bases the top of the element from the document body, but then displays the moveUpdate from the nearest parent. This causes it to be displayed completely off of the cursor. I have a forked version which fixes this issue. It requires an additional attribute that tells the directive the element class/id to use as the actual parent, this way the offset is correct.

Howdy! Thanks for the awesome library.

We're trying to build a "kanban" board of sorts that allows you to drag items between columns (got this working), but also re-arrange the columns themselves. Here's a quick example of our data structure.

this.journey = [{
    stageId: 0,
    name: 'First 30 Days',
    tasks: [{
        ord: 0,
        taskId: 3995,
        name: 'thecium unimpregnable speciology Sphaerostilbe bonneted tamandua salicylyl baggie splanchnic'
    }, {
        ord: 1,
        taskId: 8595,
        name: 'undermate politics noncorroborative dolomitize sesquicentennial governably praseolite Uigurian onofrite'
    }, {
        ord: 2,
        taskId: 4495,
        name: 'Hillhousia bicycloheptane trog snuggery dissimulative evisceration Koellia departition extracosmic'
    }]
} {
    ...
}]

We have a container div in which we placed sv-root, and we ngRepeat over the "stages" and display their tasks. We use sv-part like so:

ng-repeat="stage in journey.journey" sv-part="journey.journey[$index].tasks"

And use sv-element on the individual tasks. This all works great. However, when we try to apply another sv-element to the columns, the system kinda breaks down. Essentially we can drag columns into columns, and the drag events for tasks no longer work. Any ideas on how to solve this with your library?

Think I might need another sv-root with an attribute, but not sure how to structure that.

I'm experiencing weird dragging, when parent element have absolute positioning.
Here is an example http://codepen.io/anon/pen/zxpvVa
All I did is added to container

position: absolute;

Here is essentially the same issue, but this draggable uses jquery ui. angular-ui/ui-sortable#97
Issue is repeating in ng-sortable also, but not in rubaxa/Sortable. (Both are non jquery)

Do you have any ideas how it could be solved?

Hi,
On dragging a row it disappears and on dropping it flickers on and off before reappearing.
Using a helper or placeholder doesn't help since I'd like to see the actual div move .

Is that a bug?

Seeing the lack of dependencies and the small footprint I really want to use angular-sortable-view, but I can't get it to work.

I made a plunker of how far I came here: http://plnkr.co/edit/cUC2ZTbgH5NlPQafNFyJ?p=preview

Any idea what I'm doing wrong there?

When you've got 2 lists that are linked by the sv-root-attribute, you can drag items between the lists.
However, I don't think that there is an event available that fires when you drag an item from one list to the other?

The sv-on-sort event is fired, but I don't seem to be able to distinguish the difference between "the order of the items in the list has changed" and "an item from a linked list has been dropped"?

Is there any way/event I can use to detect this?