Skip to content

add class on dragover #460

Closed
Closed

Description

@fxck

..if that's the right event, I'd like to add a class to the list an item is being added to

something like

.sortable-there-a-thing-hovering-over-me

Activity

  1. philipzaengle commented on Jul 7, 2015

    @philipzaengle

    +1 This would be really handy!

  2. seank-com commented on Jul 27, 2015

    @seank-com
    Contributor

    You can do this using the onMove event handler.

    Sortable.create(el, {
      group: {
        name: 'stocking',
        put: false,
        pull: 'clone'
      },
      onMove: function (evt) {
        // et.to will always be the list you are over but evt.related 
        // will be === only the very first time evt.to changes
        if (evt.related === evt.to) {
          Sortable.utils.toggleClass(evt.to, 'highlight', true);
        }
      }
    });
    

    only problem is that there is nothing currently tracking the item you hovered over before hovering over this item, since the evt.from is the original list you are dragging from. I'm working on adding an evt.previous to do just this, but the dev branch has at least one issue that is slowing me down some. Note: The onMove handler is called on the sortable list the item is dragged from not the list/lists being hovered or dropped on.

  3. emmettnicholas commented on Jan 26, 2016

    @emmettnicholas

    +1 This would be analogous to jQuery-UI-sortable's "over" and "out" events: http://api.jqueryui.com/sortable/#event-over

  4. dzineduk commented on Jul 1, 2016

    @dzineduk

    +1 from me, this would be awesome, I'm dragging from one list to a sortable one and would like to be able to remove some classes from the dragged element when its hovering in the drop area!

    Plugin is awesome by the way!

  5. valentinvoilean commented on Nov 9, 2016

    @valentinvoilean

    I created a pull request for this: #991
    Maybe it's not the best code, but at least it works ;) .

  6. philippkuehn commented on Jan 23, 2017

    @philippkuehn

    +1
    is there any news on this?

  7. owen-m1 commented on Apr 8, 2019

    @owen-m1
    Member

    Here is solution: #1468

  8. waynevanson commented on Jan 15, 2020

    @waynevanson
    Contributor

    Closing because this has been answered.

  9. lk77 commented on May 20, 2021

    @lk77

    Hello,

    in my case i'm using vue draggable, so i can do :

    <draggable @dragover.native="console.log('dragover')"/>
    
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions