0

I made dragging functionality, but stuck in something, cuz not pRo .
Source hereangularjs. It's about directive from lorenzofox3
But point of question is dragging feature itself. I know how to drag element, but the problem is that it's a <table> with nested 

<thead>
   <tr>
     <th>header</th>
   </tr>
</thead>
<tbody>
   <tr>
     <td>text</td>
   </tr>
</tbody>

And I wonder how steps should be done. Should I replace DOM element positions or just imitate. And also consider i must respectively replace table columns. I need just steps(not solution) of full logic - what must happen when user
start-drags move-drag end-drag.
Angular approach is not important. Just logic.

Answer from lorenzofox3

Hello,

I think your best bet is to have an associated model to your columns so that you can watch it, and especially when you reorder the collection (by drag n drop for example). Have a look at this example. Note to reorder the model collection with drag and drop I use lrDragNDrop if you are interested in the logic. The drawback with my simple example is that you lose flexibility on the cell templates, and you will have to elaborate a bit on this example if you want something more sophisticated.

regards,

Laurent

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Medet Tleukabiluly
  • 11,662
  • 3
  • 34
  • 69

2 Answers2

2

I had similar problems when dragging table rows and tried several solutions from html5 native dragging to various drag'n drop libraries.

the only working solution so far was using (jquery-ui sortable and tables). works like a charm.

Community
  • 1
  • 1
lgersman
  • 2,178
  • 2
  • 19
  • 21
1

angular-ui ui-sortable is the way to go with dragging and dropping. I've used it to drag table columns around very successfully.

https://github.com/angular-ui/ui-sortable

adding this in your options helped me with xaxis dragging

start: function(e, ui) {
  # since this is a horizontal list, use the known workaround  from
  # https://github.com/angular-ui/ui-sortable/issues/19
  $(e.target).data("ui-sortable").floating = true
}

The developer is very helpful and responsive.

ark
  • 148
  • 1
  • 8
  • @Igersman and ark, i appreciate your help, but my purpose was to make clean directive, without dependencies. I just need logic, as if you try to write it on paper – Medet Tleukabiluly Aug 26 '14 at 11:14
  • @evc good luck! I found drag and drop to be a nightmare and was very grateful for the hard work of the jquery sortable library and the angularization of ui-sortable. Triple the pain if you're trying to support chrome/firefox/ie. – ark Aug 26 '14 at 16:57