Drag And Drop File Html5 For Mac

Drag and DropDrag and drop lets people select source content, such as text, a file, or an image, and drag it from one location ( source container) to another ( destination container), resulting in either the movement or duplication of the content. Most macOS apps implement some level of drag and drop functionality, based on user needs and app-specific features. For instance:. A read-only text field might allow its content to be dragged to other locations but not accept dropped content.

Drag and Drop is a free widget that lets you to drag and drop any file or folder to the Widget to move it to a user specified location. Also allows the user to customize the icon with a new png file.

A document list might permit dragging to reorder documents but not dropping new documents. A text editor might permit dragging text around as well as accepting dropped text from another app.Your app can enable drag and drop within a single container, such as a text view; between containers, such as two text fields or windows; and even to other apps, such as Mail and the Finder. For developer guidance, see. Supporting Drag and DropIn general, implement drag-and-drop support in your app. Drag and drop is an efficient, intuitive way to move and copy content throughout the system. Unless it truly isn’t useful in your app, such as in an immersive game, strive to support drag and drop anywhere it can add value.

If your app involves working with text, images, or files, it can benefit from drag-and-drop features.Offer alternate ways to accomplish drag-and-drop tasks. Drag-and-drop operations may be difficult for some people to perform, such as when using assistive technologies. Finder and Mail are examples of apps that offer alternatives to drag and drop—they include menu items that can be used to copy and move items between destinations.Determine whether a drag-and-drop operation should result in a move or a copy. In general, a move usually makes sense when the source and destination containers are the same, such as the same app, document (even when dragging between two windows that display the same document), or disk. A copy usually makes sense when the source and destination containers are different, such as two different apps, documents, or disks. If you drag a Mail message to the Finder desktop, for example, the message is copied to the desktop as a file.

If you drag a Mail message to a mailbox, the message is moved from its current location to the new mailbox.When possible, make drag-and-drop operations reversible. Occasionally, a user might inadvertently drag content to the wrong destination. When this happens, the user should ideally be able to use undo to restore the content to its previous location. Responding to DraggingWhen possible, let people select and drag content in a single step.

In Finder, for example, you can click a file and immediately begin dragging it to a new destination. You don’t need to make a distinct selection, pause, and then start dragging unless you want to drag multiple files.Let people drag selected content in inactive windows.

Selected content in an inactive window is known as a background selection and has a different appearance from selected content in the active window. In general, people expect to be able to drag a background selection—especially when it’s a range of content like text, images, or files—to the active window. In TextEdit, for example, you can drag selected text from an inactive document to the active document without bringing the inactive document to the front. To support such an action, you must maintain the user’s selection when a window becomes inactive.When possible, let people click and drag individual items in inactive windows without impacting the background selection. For example, while using an app, you can click an individual file in a background Finder window and drag it to a new location without deselecting any previously selected files.

Providing Feedback During a DragDisplay a drag image beneath the pointer as soon as content is dragged a distance of at least three points. A drag image should be a translucent representation of the content being dragged. This appearance provides context, indicates that a drag is in process, and enables the user to see destinations beneath the dragged content. The drag image should be displayed until the user drops the content. Display a multi-item drag image when multiple items are dragged. If the use selects and drags multiple items, the drag image should be composed of stacked images representing the individual items. For related guidance, see.Display an item count badge during multi-item drags.

A badge appears below the pointer as a small red oval containing a white number indicating the number of items being dragged.Update the badge count when appropriate. If a destination can accept only a subset of dragged items, change the badge count to indicate how many items will be accepted.If it adds clarity, change the drag image when content is dragged over a destination. When dragging a photo into a TextEdit document, for example, the photo expands to show how it will look if the user drops it in the document. This behavior lets the user preview the result of a drag and drop operation before committing to it. Although changing the drag image can provide valuable feedback, avoid creating a distracting experience in which drag images are constantly and radically changing form. Display a pointer that indicates what happens when content is dropped.

For example, when dragging a new icon into a toolbar, the copy pointer is displayed. Other pointers that provide useful destination feedback include drag link, disappearing item, and operation not allowed. See.Clearly indicate when dropping isn’t possible. During a drag, users should know when they can and can’t drop content. Some apps communicate this by displaying an insertion point, highlighting, or acceptance pointer badge only when dropping is possible—in other words, the lack of visual feedback indicates when dropping isn’t possible. Other apps display an explicit not allowed badge, such as a circle with a slash.Highlight a new destination when content is dragged above it. When there are multiple destinations, highlight one at a time.

When the source and destination containers are the same, highlighting is unnecessary. For example, in Finder, moving a document icon to a different location in the same folder window doesn’t highlight the folder window because doing so would cause confusion.

In some cases, highlighting may occur if content is dragged completely out of a container and then reenters it. Highlighting should be removed when content is no longer positioned above a destination. In text, use a vertical insertion indicator to show where the dragged content will appear when dropped.

An insertion indicator is separate from the pointer, which indicates to users whether a drag is valid and whether it is interpreted as a move or copy.In a table, use a horizontal insertion indicator and highlighting to show where content will reside when dropped. The sidebar of a Finder window, for example, shows a horizontal insertion indicator when content is dragged between existing sidebar items. Folders and disks in the sidebar also become highlighted when content is dragged over them, indicating that dropped content will be moved or copied into them.Automatically scroll a destination when appropriate.

When content is dragged outside the bounds of a destination, your app must determine whether to scroll the contents of the destination or let the user continue dragging to an entirely different destination. If your app lets the user continue dragging, consider defining a region that causes automatic scrolling when the dragged item is positioned above it. For example, a Finder window automatically scrolls when content is dragged to the top or bottom of the window’s body area. Automatic scrolling should only occur in active windows. If the user attempts to initiate automatic scrolling in an inactive window, bring the window to the front. Accepting Dropped DataCheck for the Option key at drop time. Users can force a drag-and-drop operation within the same container to behave like a copy by pressing the Option key while dragging.

This behavior gives users the flexibility of making the move-or-copy decision while in the process of dragging. If the user stops pressing Option before dropping content in the same container, then a move occurs instead of a copy. In general, dragging between two different containers should always produce a copy. Use the expected animation when dropping is unsuccessful. When the user drops an item on an invalid destination, or when dropping fails, the item should zoom from the pointer location back to its original location. This behavior is known as a zoomback.Ask for confirmation before completing a drag-and-drop operation that can’t be reversed.

For example, Finder asks for confirmation when a user drags a file into a write-only folder because the user doesn’t have privileges to open the folder and remove the dropped item.Provide additional feedback when dropped content initiates a process. If the user drops an item onto an icon representing a task, such as printing, show that the task has begun and keep the user informed of the task’s progress.Extract the relevant portion from a dropped item. For example, when users drag a person from the Contacts app to the To recipient field in a Mail message, only the name and email address are accepted, not the rest of the contact’s address information.Update the selection accordingly after content is dropped. When selected content is dragged to a new location in the same container, it should remain selected in its new location.

When selected content is dragged to another container, it should become selected in the new location and any previous selection should be deselected.Apply appropriate styling to dropped text. If the destination supports the same styled text attributes, the dropped text should maintain its original font, typeface, and size attributes. Otherwise, the dropped text should assume the font, typeface, and size attributes of the destination.

Sharing Dragged DataConsider letting people drag content from your app into the Finder. Ideally, output this content in a format that can be dragged back to or opened by your app. Calendar, for example, lets users drag events to the Finder as.ics files, which can be opened in Calendar or shared with others.

Dragging and Dropping

Safari and WebKit-based applications include support for customizing the behavior of drag-and-drop operations within your HTML pages.

Note

This technology is supported with Safari 11 in both macOS and iOS.

About JavaScript Drag and Drop

Support for drag-and-drop operations is implemented in JavaScript and may be applied to individual elements of your HTML page. For drag operations, an element can handle the following JavaScript events:

• ondragstart

• ondrag

• ondragend

The ondragstart event initiates the drag operation. You can provide a handler for this event to initiate or cancel drag operations selectively. To cancel a drag operation, call the preventDefault method of the event object. To handle an event, assign a value to the effectAllowed property and put the data for the drag in the dataTransfer object, which you can get from the event object. See Changing Drag Effects for information on the effectAllowed property. See Manipulating Dragged Data for information on handling the drag data.

Once a drag is underway, the ondrag event is fired continuously at the element to give it a chance to perform any tasks it wants to while the drag is in progress. Upon completion of the operation, the element receives the ondragend event. If the drag was successful, the ondrop handler for the drop target element is also called (before the ondragend handler is called).

While a drag is in progress, events are sent to elements that are potential drop targets for the contents being dragged. Those elements can handle the following events:

• ondragenter

• ondragover

• ondragleave

• ondrop

The ondragenter and ondragleave events let the element know when the user’s mouse enters or leaves the boundaries of the element. You can use these events to change the cursor or provide feedback as to whether a drop can occur on an element. The ondragover event is sent continuously while the mouse is over the element to give it a chance to perform any needed tasks. If the user releases the mouse button, the element receives an ondrop event, which gives it a chance to incorporate the dropped content.

If you implement handlers for the ondragenter and ondragover events, you should call the preventDefault method of the event object. This method takes no parameters and notifies WebKit that your handler will act as the receiver of any incoming data. If you do not call this method, WebKit receives the data and incorporates it for you. You do not need to call preventDefault if you simply want to be notified when the events occur.

Note

You must, at minimum, implement ondragover and call the preventDefault method on the event object. If you do not do this, you will not receive any of these four events.

Adding Handlers to Elements

You can add handlers for drag-and-drop events to any element in a webpage. When a drag or drop operation occurs, WebKit looks for the appropriate handler on the element that is the focus of the operation. If that element does not define a handler, WebKit walks up the list of parent elements until it finds one that does. If no element defines a handler, WebKit applies the default behavior. To demonstrate this process, suppose you have the following basic HTML in a webpage:

1. <body
2. >
3. <span>Drag this text.</span>
4. </body>

If a user initiates a drag operation on the text in the span tag, WebKit calls SpanDragHandler to handle the event. When the drag operation finishes, WebKit calls the BodyDragEndHandler to handle the event.

Making an Element Draggable

WebKit provides automatic support to let users drag common items, such as images, links, and selected text. You can extend this support to include specific elements on an HTML page. For example, you could mark a particular div or span tag as draggable.

To mark an arbitrary element as draggable, add the -webkit-user-drag attribute to the style definition of the element. Because -webkit-user-drag is a cascading style sheet (CSS) attribute, you can include it as part of a style definition, or as an inline style attribute on the element tag. The values for this attribute are listed in Table 4-1.

The following example shows how you might use this attribute in a spanMessenger pro font free. tag to permit the dragging of the entire tag. When the user clicks on the span text, WebKit identifies the span as being draggable and initiates the drag operation.

1. <span>draggable text</span>

Manipulating Dragged Data

When an event occurs, your handler uses the dataTransfer object attached to the event to get and set the clipboard data. This object defines the clearData, getData, and setData methods to allow you to clear, get, and set the data on the dragging clipboard.

Note

For security purposes, the getData method can be called only from within the ondrop event handler.

Unlike many other browsers, the WebKit drag-and-drop implementation supports data types beyond those that are found in HTML documents. When you call either getData or setData, you specify the MIME type of the target data. For types it recognizes, WebKit maps the type to a known clipboard type. However, you can also specify MIME types that correspond to any custom data formats your application understands. For most drag-and-drop operations, you will probably want to work with simple data types, such as plain text or a list of URIs.

Like applications, WebKit supports the ability to post the same data to the clipboard in multiple formats. To add another format, you simply call the setData method with a different MIME type and a string of data that conforms to that type.

To get a list of types currently available on the clipboard, you can use the types property of the dataTransfer object. This property contains an array of strings with the MIME types of the available data.

Changing Drag Effects

When dragging content from one place to another, it might not always make sense to move that content permanently to the destination. You might want to copy the data or create a link between the source and destination documents instead. To handle these situations, you can use the effectAllowed and dropEffect properties of the dataTransfer object to specify how you want data to be handled.

The effectAllowed property tells WebKit what types of operation the source element supports. You would typically set this property in your ondragstart event handler. The value for this property is a string, whose value can be one of those listed in Table 4-2.

The dropEffect property specifies the single operation supported by the drop target (copy, move, link, or none). When an element receives an ondragenter event, you should set the value of this property to one of those values, preferably one that is also listed in the effectAllowed property. If you do not specify a value for this property, WebKit chooses one based on the available operations (as specified in effectAllowed). Copy operations have priority over move operations, which have priority over link operations.

When these properties are set by the source and target elements, WebKit displays feedback to the user about what type of operation will occur if the dragged element is dropped. For example, if the dragged element supports all operations but the drop target only supports copy operations, WebKit displays feedback indicating a copy operation would occur.

Changing the Appearance of Dragged Elements

During a drag operation, WebKit provides feedback to the user by displaying an image of the dragged content under the mouse. The default image used by WebKit is a snapshot of the element being dragged, but you can change this image to suit your needs.

Changing the Snapshot With CSS

The simplest way to change the drag image appearance is to use cascading style sheet entries for draggable elements. WebKit defines the -webkit-drag pseudoclass, which you can use to modify the style definitions for a particular class during a drag operation. To use this pseudoclass, create a new empty style sheet class entry with the name of the class you want to modify, followed by a a colon and the string -webkit-drag. In the style definition of this new class, change or add attributes to specify the differences in appearance between the original element and the element while it is being dragged.

The following example shows the style sheet definition for an element. During normal display, the appearance of the element is determined by the style sheet definition of the divSrc4 class. When the element is dragged, WebKit changes the background color to match the color specified in the divSrc4:-webkit-drag pseudoclass.

1. #divSrc4 {
2. display:inline-block;
3. margin:6;
4. position:relative;
5. top:20px;
6. width:100px;
7. height:50px;
8. background-color:rgb(202,232,255);
9. }
10. #divSrc4:-webkit-drag {
11. background-color:rgb(255,255,154)
12. }

Specifying a Custom Drag Image

Another way to change the drag image for an element is to specify a custom image. When a drag operation begins, you can use the setDragImage method of the dataTransfer object. This method has the following definition:

The image parameter can contain either a JavaScript Image object or another element. If you specify an Image object, WebKit uses that image as the drag image for the element. If you specify an element, WebKit takes a snapshot of the element you specify (including its child elements) and uses that snapshot as the drag image instead.

The x and y parameters of setDragImage specify the point of the image that should be placed directly under the mouse. This value is typically the location of the mouse click that initiated the drag, with respect to the upper-left corner of the element being manipulated.

Unfortunately, obtaining this information in a cross-browser fashion is easier said than done. There is no standard way to determine the position of the mouse relative to the document because different browsers implement the standard event values in subtly incompatible ways.

For the purposes of Safari and WebKit, clientX and clientY are document relative, as are pageX and pageY (which are thus always equal to clientX and clientY).

Obtaining the position of the element under the mouse is somewhat easier. QuirksMode has a page (with code samples) on the subject at http://www.quirksmode.org/js/findpos.html.

Drag-and-Drop Example

No description of drag-and-drop would be complete without a working example. Save this into an HTML file and open it in Safari. You should see a very simple set of boxes containing words. If you drag each word box into the blue “target” box, the box will disappear and the word will appear in its correct place to form the phrase “This is a test”.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Drag-and-Drop</title>
5. <script><!--
6. var dragitem = undefined;
7. function setdragitem(item, evt) {
8. dragitem=item;
9. // alert('item: '+item);
10. // item is an HTML DIV element.
11. // evt is an event.
12. // If the item should not be draggable, enable this next line.
13. // evt.preventDefault();
14. return true;
15. }
16. function cleardragitem() {
17. dragitem=undefined;
18. // alert('item: '+item);
19. }
20. function dodrag() {
21. // alert('item: '+dragitem);
22. }
23. // This is required---used to tell WebKit that the drag should
24. // be allowed.
25. function handledragenter(elt, evt) {
26. evt.preventDefault();
27. return true;
28. }
29. function handledragover(elt, evt) {
30. evt.preventDefault();
31. return true;
32. }
33. function handledragleave(elt, evt) {
34. }
35. function handledrop(elt, evt) {
36. // alert('drop');
37. dragitem.style.display='none';
38. var newid=dragitem.id + '_dest';
39. var dest = document.getElementById(newid);
40. dest.innerHTML = dragitem.innerHTML;
41. }
42. // --></script>
43. <style><!--
44. .wordbox { border: 1px solid black; text-align: center; width: 50px; float: left; -webkit-user-drag: element; -webkit-user-select: none; }
45. .spacer { clear: both; }
46. .target { margin-top: 30px; padding: 30px; width: 70px; border: 1px solid black; background: #c0c0ff; margin-bottom: 30px; -webkit-user-drop: element; }
47. .word { margin: 30px; min-height: 30px; border-bottom: 1px solid black; width: 50px; float: left; }
48. --></style>
49. </head>
50. <body>
51. <p>Drop words onto target area to put them in their places.</p>
52. <div ondrag='dodrag();'>This</div>
53. <div ondrag='dodrag();'>is</div>
54. <div ondrag='dodrag();'>a</div>
55. <div ondrag='dodrag();'>test</div>
56. <div></div>
57. <div ondragenter='handledragenter(this, event);' ondragover='handledragover(this, event);' ondragleave='handledragleave(this, event);' ondrop='handledrop(this, event);'>TARGET</div>
58. <div>
59. <div></div>
60. <div></div>
61. <div></div>
62. <div></div>
63. </div>
64. </body>
65. </html>

Copyright © 2018 Apple Inc. All rights reserved. Terms of Use Privacy Policy Updated: 2017-09-19