C Dragging properties The dataTransfer object exposes properties to provide visual feedback to the user during the drag process. These properties can also be used to control how each drop target responds to a particular data type.
DataTransfer.effectAllowed Restricts what 'type of drag' the user can perform on the element. It is used in the drag-and-drop processing model to initialize the dropEffect during the dragenter and dragover events. The property can be set to the following values: none, copy, copyLink, copyMove, link, linkMove, move, all, and uninitialized. DataTransfer.dropEffect Controls the feedback that the user is given during the dragenter and dragover events.
When the user hovers over a target element, the browser's cursor will indicate what type of operation is going to take place (e.g. A copy, a move, etc.). The effect can take on one of the following values: none, copy, link, move. E.dataTransfer.setDragImage(imgElement, x, y) Instead of using the browser's default 'ghost image' feedback, you can optionally set a drag icon var dragIcon = document.createElement('img'); dragIcon.src = 'logo.png'; dragIcon.width = 100; e.dataTransfer.setDragImage(dragIcon, -10, -10); Result (you should see the Google logo when dragging these columns).