Question

9

How to style dragged element

rated 0 times [ 13] [ 4] / answers: 1 / hits: 42440 / 12 Years ago, sat, june 23, 2012, 12:00:00

There are some events that I can use for handling drag & drop:

https://developer.mozilla.org/en/DragDrop/Drag_and_Drop

there is a drag event, which is fired during the time the element is being dragged. I can control the source element styling or the target droppable container, but how can I style the ghost element that's being created by the browser?

I want to remove the disabled icon from it when the element is over a non-draggable area and replace it with a cursor-move icon

Here's what I have so far:

http://jsfiddle.net/YkaCM/

enter

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

trayvon

Add To Favorites

Follow

Total Points: 35

Total Questions: 117

Total Answers: 88

Location: Guernsey

Member since Tue, Jul 6, 2021

3 Years ago

trayvon questions

1 Bootstrap modal UncaughtType Error on modal loading

Sun, Apr 24, 22, 00:00, 2 Years ago

1 Iterate through array of objects using javascript

Wed, Feb 9, 22, 00:00, 2 Years ago

1 Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:25058

Sun, May 23, 21, 00:00, 3 Years ago

1 Why could window scroll event not being fired

Tue, Jul 14, 20, 00:00, 4 Years ago

1 Error: Connecting to a SFTP server with ssh2-sftp-client in a AWS lambda function throws a time out

Thu, Jun 4, 20, 00:00, 4 Years ago

View All

answered 12 Years ago keyanah · Accepted Answer

Not too sure about other browsers however the dataTransfer object contains a property called mozCursor. This allows you to change the cursor in the drag state, however this is a Mozilla property.

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/mozCursor

An example of using this can be found at the following location, the setting is changed on dragstart (set to use default 'arrow' cursor), dragover (set to use auto drag cursor (arrow with copy)) and dragleave (reset to use default 'arrow' cursor):

http://jsfiddle.net/YkaCM/4/

Try the answers to:

Javascript: How can I set the cursor during a drag & drop operation on a website?

Updated your dragover with the following:

$('#droppable').bind('dragover', function (e) {

  $(this).addClass('over'); // new



  ...

http://jsfiddle.net/YkaCM/1/