Can we persist the position too?

[sunflowerrahul]

Hi,
Would like to persist the view at partcular position. When user change the position of the multiple view by drag and drop, it should be available at same postion.
I am not able to create Pull request, so i created the request here.

[caitp]

@sunflowerrahul can you explain what you mean by "persist the view"? If possible, please provide an example of the "desirable" behaviour (using another library which enables it, if such a library exists)

[sunflowerrahul]

@caitp , we are looking to save the position of the view . or we can define some layout and save in the database ? I have no idea as such . In Liferay portal, they provide that feature(customization). They have used the alloy ui and bootstrap 2.3.2 css . I donnot whether they are storing the position in the database . My Requirement to customize the dashboard as per user level not the global level.

[caitp]

I'm still not sure what you're actually talking about =( visual example, please lol.

[guisouza]

@caitp, he is trying to persist the pins between sessions
for example : I drag some element to some random position on the screen , when I come back to that page, it will be in that same position.

@sunflowerrahul this plugin, only provides the drag and drop behavior, you will have to manipulate the position and save it to the localStorage for example ..

if I have time i will send a pull request with that functionality

[andrieski]

Hi, I was curious to see if this feature was implemented? Is there now a way to retrieve the position of the element after its been dragged so that the position can be saved and restored at a later time? Thanks.

[caitp]

never got a PR for this. as @guisouza mentions, this is mainly about simple d&d, so it may be outside of the scope of the library. But I'm happy to review and possibly accept a PR that implements it

[guisouza]

uehuehueeuh I love "issues resurrections".
btw . @andrieski you will have to create a function that stores the X and Y positions of the element and stores it to the localStorage for example, and attach it to the dragEnd event.

[andrieski]

Ok, I see, I'll try to do that. Also, I was wondering if this supports draggable handles? I was interested in a project that involved dragging elements and still being able to interact with the html inside. Or is that also outside the scope of the library?

[caitp]

well, there are other projects that try to do angular-y contenteditable stuff which would make sense for the inner html. You could certainly wrap a draggable around those (but pulling a contenteditable library into this and doing it here is probably a bit much, yeah)

[andrieski]

Hi, I was considering removing the 'draggable' and 'drag-keep-size' directive by watching a Boolean scope variable, but doing

element.removeAttr('draggable').removeAttr('drag-keep-size');

removes the visible attributes from chrome devtools, but the element is still draggable. I'd like to be able to turn the behavior on and off. What strategy would you recommend?

[caitp]

@andrieski to do that, you'd need to add some methods to the Draggable class to turn unlisten to the events, and possibly adjust its style/position. It should be pretty simple to implement. Patches welcome.

[andrieski]

@caitp thanks for the suggestions. JS is not my strong suit, and frankly, I don't know it too well. What do you mean by turn unlisten to the events? I attempted to add another option, which only works when the directive is compiled. That is, if I set allowDrag to false, the element won't drag, but if I later dynamically change allowDrag to true, dragging is still disabled. I'd definitely like to work on this, however. Should I make new issue or do you have any suggestions? I don't have too much experience with GitHub etiquette .

This is my failed attempt:

var draggableOptions = {
  'dragKeepSize': 'keepSize',
  'dragWithin': 'dragWithin',
  'allowDrag': 'allowDrag'
};

      dragStart: function(event) {
        var self = isDraggable(this) ? this : $drag.draggable(this);
        if (self.options.allowDrag == false) {
          return;
        }
        event = fixup(event);
        event.preventDefault();

[caitp]

those options are only handled at compile time, because the main api is the Draggable class and $drag service. You can add a method for turning dragging on and off, and do it by removing/re-adding event listeners (among other things). Then just wrap that method with a declarative api in the directive if you want to