Coder Social home page Coder Social logo

Comments (4)

lacek avatar lacek commented on July 17, 2024

For Ember users who may have the same problem, my workaround is to use CollectionView to generate the ul: http://jsbin.com/lemahu/4/edit

from html5sortable.

lukasoppermann avatar lukasoppermann commented on July 17, 2024

Wouldn't it be sensible to do it this way, because if you want to add an item to the list the actual position it should be appended to is the index you get.

I don't know ember, and the <script> tags seem a little weird to me, but if you have a list like the following I would think an index should include the disabled item, so when you add a ne item with js (like moving to a connected list) it gets the correct position.

<ul>
  <li class="disabled">...<li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

from html5sortable.

lacek avatar lacek commented on July 17, 2024

@lukasoppermann I agree that it's weird ember generates such script tags and they're actually breaking the HTML structure. Nevertheless, since the items option is for specifying which items inside the element should be sortable, I naturally think that the index is referring to position among the sortable items but in fact it is the position among the item's sibling elements. If this is the original design, I think it should be stated in the documentation.

from html5sortable.

lukasoppermann avatar lukasoppermann commented on July 17, 2024

@lacek I see what you mean, as I thought the same for a moment, but consider you want to add an item into your list at the visual index 2. If you would use index: 2 it would be added before the visible items, so it actually makes sense to calculate the "real index".

Do you have a use-case where it is necessary to have the index of only the items? I guess you could always send a PR adding another value to the event like items-index or maybe something with a better name.

I do also agree on a need to document this behaviour so maybe you want to send a separate PR for this?

from html5sortable.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.