Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Angularjs with jquery ui make elements can be sortable both vertical and horizontal

Here is the example for make element sortable vertically, that is based on angularjs and jquery-ui.

Example Link

However, what I want is to make element be sortable both in vertical and horizontal.

In the example:

  • I've seen a lot of spinals, Dude, and this guy is a fake.
  • who the fuck is Arthur Digby Sellers

The elements in the list could be draggable and sortable in vertical direction.

And I need to elements in the list could be draggable and sortable in both horizontal and vertical direction.

The two images in this link might help you better understand what I mean.

User Gravatar

Jusliang

Posted May 25 2014 16:15 UTC

$30


  • Expired
  • jquery
    angular.js
    angular
  • 1691 Views

10 Replies


In order for the min-height to be recognised, an element must be present, so if you add the following after your ng-repeat li:

<li style="list-style-type: none;min-height:50px"></li>

so that your ul now looks as follows:

<ul id="targetList"
    dnd-between-list="model,sourceList"
    ng-class="{'minimalList':sourceEmpty()}">
    <li class="alert alert-info nomargin"
        ng-repeat="item in model">{{item.value}}</li>
    <li style="list-style-type: none;min-height:50px"></li>
</ul>

It should work ok.

EDIT:

Your request if I understood correctly was to allow a single list populate a second empty list. This can be accomplished by adding an invisible li element (Line 69) into the ul statement below the hg-repeat li statements.

The following uses the files in the sample link provided in a plunker:

Line 64 - 70 of index.html contains the ul statement referenced above

http://embed.plnkr.co/y5WAIYqsGH35bojejqFq/preview

User Gravatar

RoryOSiochain

Posted May 25 2014 17:12 UTC

@RoryOSiochain could you post your code in jsfiddle or somewhere for explain in detail? many thanks!

User Gravatar

Jusliang

Posted May 25 2014 17:29 UTC

@RoryOSiochain Many thanks! But that is not the one I want.

I update the example link, which might make you understand what I mean.

Actually. I want elements can be sortable both in horizontal and vertical.

The updated link only shows the elements could be sortable in vertical, but I need to be both horizontal and vertical.

Thanks and regards Justin

User Gravatar

Jusliang

Posted May 25 2014 18:07 UTC

Sorry, I don't understand what you're looking for. I don't think I can help.

User Gravatar

RoryOSiochain

Posted May 25 2014 18:15 UTC

@RoryOSiochain

So sorry for my poor explanation.
Maybe two images in this link could help me explain better.

Really hope that you could help.

And I am willing to increase the payment.

Thanks and regards
Justin

User Gravatar

Jusliang

Posted May 25 2014 18:30 UTC

What in this example does not do what you want Jusliang http://www.smartjava.org/examples/dnd/double.html? I can sort both lists up and down as well as move items between the two lists without a problem, all you need is the empty list fix mentioned by RoryOSiochain by the looks of it.

User Gravatar

ServA1

Posted May 25 2014 23:27 UTC

@ServA1 please carefully read my question. that's not I want

User Gravatar

Jusliang

Posted May 25 2014 23:29 UTC

@ServA1 please carefully read my question. that's not I want

User Gravatar

Jusliang

Posted May 25 2014 23:30 UTC

I have read your question carefully and if that's not what you are after then I would have to quote RoryOSiochain

Sorry, I don't understand what you're looking for. I don't think I can help.

You still haven't answered my question, what in that example doesn't do what you want? Anyway I will leave it up to someone else to work this out for you I think. Again, sorry i couldn't help.

User Gravatar

ServA1

Posted May 25 2014 23:41 UTC

Hi Jusliang

I've prepared a fiddle with an example of how to do this http://jsfiddle.net/rotemtam/5ELzy/

Please write back if you need anything more,

R

User Gravatar

rotemtam

Posted May 26 2014 12:43 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions