jquery / jquery/jquery-ui

Cursor is not properly reset with draggable and connectToSortable

Open
#2,152 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Behavior shared with 1.12 Comp: Draggable Comp: Sortable
Dominant language
JavaScript
Stars
11.3k
Forks
5.2k
PR merge metrics
No merged PRs in 30d

Description

If both the sortable and draggable have the cursor option set the cursor stays at the value from the draggable after the draggable was dropped.

Example to reproduce:
https://jsfiddle.net/5fxqybrs/1/
Moving the sortable elements works fine and sets the cursor to move and resets it back to auto.
But moving the draggable into the sortable keeps the cursor as move and it will never go back to auto again.

The following happens:

  • draggable start event is triggered: saves body value auto and sets cursor to move on body
  • sortable start event is triggered: saves body value of move and sets cursor to move on body
  • draggable stop event is triggered: setting cursor back to stored value of auto
  • sortable stop event is triggered: setting cursor back to stored value of move

A workaround I have implemented for now is setting the stop option of the sortable to a function which sets the cursor to auto:

    $( "#sortable" ).sortable({
      revert: true,
      cursor: "move",
      stop: function() {
          $('body').css('cursor', 'auto');
      }
    });

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked jsFiddle and trace the draggable and sortable cursor handling around their start and stop events. Reproduce the drop sequence, then verify that the cursor returns to auto after the sortable receives the draggable; the payload does not name a source file or test.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, jquery
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.