Search completed in 1.88 seconds.
316 results for "drag":
Your results are loading. Please wait...
Drag Operations - Web APIs
the following describes the steps that occur during a drag and drop operation.
... the drag operations described in this document use the datatransfer interface.
... the draggable attribute in a web page, there are certain cases where a default drag behavior is used.
...And 92 more matches
HTML Drag and Drop API - Web APIs
html drag and drop interfaces enable applications to use drag-and-drop features in browsers.
... the user may select draggable elements with a mouse, drag those elements to a droppable element, and drop them by releasing the mouse button.
... a translucent representation of the draggable elements follows the pointer during the drag operation.
...And 56 more matches
Drag and Drop JavaScript Wrapper - Archive of obsolete content
this section describes how to use the javascript wrapper for drag and drop.
... the javascript drag and drop wrapper the javascript wrapper to drag and drop simplifies the process by handling all of the xpcom interfaces for you.
...all you have to do is write some simpler functions which work with the data being dragged.
...And 51 more matches
Drag and Drop - Archive of obsolete content
this section describes how to implement objects that can be dragged around and dropped onto other objects.
... the drag and drop interface many user interfaces allow one to drag particular objects around within the interface.
... for example, dragging files to other directories, or dragging an icon to another window to open the document it refers to.
...And 51 more matches
nsIDragService
widget/nsidragservice.idlscriptable implements the drag service for handling drag and drop operations.
...add-ons should use the standard datatransfer drag and drop api instead.
... the only exception is getcurrentsession(), since there's currently no way to check for a drag in progress using standard dom methods or properties.
...And 43 more matches
Drag and Drop Example - Archive of obsolete content
an example of implementing drag and drop will be implemented in this section.
... dragging elements around here, we'll create a simple board where items from a palette can be dragged onto the board.
... the user can click on one of several xul elements on the palette and drag it onto a stack element to create an element of a particular type.
...And 26 more matches
Recommended Drag Types - Web APIs
the html drag and drop api supports dragging various types of data, including plain text, urls, html code, files, etc.
... the document describes best practices for common draggable data types.
... dragging text for dragging text, use the text/plain type.
...And 20 more matches
DragEvent - Web APIs
WebAPIDragEvent
the dragevent interface is a dom event that represents a drag and drop interaction.
... the user initiates a drag by placing a pointer device (such as a mouse) on the touch surface and then dragging the pointer to a new location (such as another dom element).
... applications are free to interpret a drag and drop interaction in an application-specific way.
...And 19 more matches
Dragging and Dropping Multiple Items - Web APIs
mozilla supports the ability to drag multiple items using some additional non-standard methods.
... the drag processing described in this document use the datatransfer interface.
... setting and getting with indices the mozsetdataat() method allows you to add multiple items during a dragstart event.
...And 15 more matches
nsIClipboardDragDropHooks
widget/public/nsiclipboarddragdrophooks.idlscriptable interfaces for overriding the built-in drag, drop, copy, and paste implementations in the content area and editors.
... use this to do things such as prevent a drag from starting, adding or removing data and flavors, or preventing the drop.
... inherits from: nsisupports last changed in gecko 1.7 embedders who want to have these hooks made available should implement nsiclipboarddragdrophooks and use the command manager to send the appropriate commands with these parameters/settings: command: cmd_clipboarddragdrophook params value type possible values "addhook" isupports nsiclipboarddragdrophooks as nsisupports "removehook" isupports nsiclipboarddragdrophooks as nsisupports note: overrides/hooks need to be added to each window (as appropriate).
...And 14 more matches
nsIDragSession
widget/public/nsidragsession.idlscriptable provides support for interacting with an ongoing drag session during a drag and drop operation.
... inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void getdata( in nsitransferable atransferable, in unsigned long aitemindex ); boolean isdataflavorsupported( in string adataflavor ); attributes attribute type description candrop boolean set the current state of the drag, whether it can be dropped or not.
... datatransfer nsidomdatatransfer the data transfer object for the current drag operation.
...And 10 more matches
File drag and drop - Web APIs
html drag and drop interfaces enable web applications to drag and drop files on a web page.
... this document describes how an application can accept one or more files that are dragged from the underlying platform's file manager and dropped on a web page.
... the main steps to drag and drop are to define a drop zone (i.e.
...And 10 more matches
DataTransfer.setDragImage() - Web APIs
when a drag occurs, a translucent image is generated from the drag target (the element the dragstart event is fired at), and follows the mouse pointer during the drag.
...however, if a custom image is desired, the datatransfer.setdragimage() method can be used to set the custom image to be used.
... this method must be called in the dragstart event handler.
...And 9 more matches
GlobalEventHandlers.ondragexit - Web APIs
the globaleventhandler.ondragexit property is an event handler for the dragexit event.
... the ondragexit event is a gecko specific event listener.
... if you are building a drag-and-drop feature for a website please see the ondragleave event listener instead.
...And 7 more matches
draggable - HTML: Hypertext Markup Language
the draggable global attribute is an enumerated attribute that indicates whether the element can be dragged, either with native browser behavior or the html drag and drop api.
... draggable can have the following values: true: the element can be dragged.
... false: the element cannot be dragged.
...And 7 more matches
nsIClipboardDragDropHookList
widget/public/nsiclipboarddragdrophooklist.idlscriptable this interface is an internal gecko component.
... it provides basic operations such as adding, removing and enumerating clipboard hooks for the nsiclipboarddragdrophooks interface.
...you should access these capabilities indirectly by sending commands using the nsiclipboarddragdrophooks interface.
...And 6 more matches
Drag and drop events - Archive of obsolete content
firefox 3 adds two new events that allow you to determine when drag operations begin and end.
... note: the drag and drop event support advertised in the firefox 3 release notes is not the same as the events described in the drag and drop section of the html 5 working draft.
...firefox 3 does not support the 'drag' event.
...And 5 more matches
GlobalEventHandlers.ondragend - Web APIs
a global event handler for the dragend event.
... syntax var dragendhandler = targetelement.ondragend; return value dragendhandler the dragend event handler for element targetelement.
... example this example shows two ways to use the ondragend attribute handler to set an element's dragend event handler.
...And 5 more matches
GlobalEventHandlers.ondragenter - Web APIs
a global event handler for the dragenter event.
... syntax var dragenterhandler = targetelement.ondragenter; return value dragenterhandler the dragenter event handler for element targetelement.
... example this example demonstrates using the ondragenter attribute handler to set an element's dragenter event handler.
...And 5 more matches
GlobalEventHandlers.ondragleave - Web APIs
a global event handler for the dragleave event.
... syntax var dragleavehandler = targetelement.ondragleave; return value dragleavehandler the dragleave event handler for element targetelement.
... example this example demonstrates using the ondragleave attribute handler to set an element's dragleave event handler.
...And 5 more matches
Drag & Drop - Archive of obsolete content
dropping files onto an xul application it's possible to setup drag and drop events to handle dropping files from external applications or os file managers onto your xul-based application.
... first, you need to hook up the basic drag event handlers: elem.addeventlistener("dragover", _dragover, true); elem.addeventlistener("dragdrop", _dragdrop, true); here, elem could be a window or an xul element.
... next, setup the handlers so that files can be dropped on the application: function _dragover(aevent) { var dragservice = components.classes["@mozilla.org/widget/dragservice;1"].getservice(components.interfaces.nsidragservice); var dragsession = dragservice.getcurrentsession(); var supported = dragsession.isdataflavorsupported("text/x-moz-url"); if (!supported) supported = dragsession.isdataflavorsupported("application/x-moz-file"); if (supported) dragsession.candrop = true; } function _dragdrop(aevent) { var dragservice = components.classes["@mozilla.org/widget/dragservice;1"].getservice(components.interfaces.nsidragservice); var dragsession = dragservice.getcurrentsession(); var _ios = components.classes['@mozilla.org/network/io-service;1...
...And 4 more matches
DragEvent() - Web APIs
this constructor is used to create a synthetic dragevent object.
... although this interface has a constructor, it is not possible to create a useful datatransfer object from script, since datatransfer objects have a processing and security model that is coordinated by the browser during drag-and-drops.
... syntax event = new dragevent(type, drageventinit); arguments type is a domstring representing the name of the event (see dragevent event types).
...And 4 more matches
Window.ondragdrop - Web APIs
WebAPIWindowondragdrop
use the modern standard html5 drag and drop feature instead.
... summary an event handler for drag and drop events sent to the window.
... syntax window.ondragdrop = funcref; window.addeventlistener("dragdrop", funcref, usecapturing); funcref the event handler function to be registered.
...And 4 more matches
Document: drag event - Web APIs
the drag event is fired every few hundred milliseconds as an element or text selection is being dragged by the user.
... bubbles yes cancelable yes default action continue the drag & drop operation.
... interface dragevent event handler property ondrag examples see this code in a jsfiddle demo or interact with it below.
...And 3 more matches
GlobalEventHandlers.ondrag - Web APIs
a global event handler for the drag event.
... syntax var draghandler = targetelement.ondrag; return value draghandler the drag event handler for element targetelement.
... example this example includes the use of the ondrag attribute handler to set an element's drag event handler.
...And 3 more matches
GlobalEventHandlers.ondragover - Web APIs
a global event handler for the dragover event.
... syntax var dragoverhandler = targetelement.ondragover; return value dragoverhandler the dragover event handler for element targetelement.
... example this example demonstrates using the ondragover attribute handler to set an element's dragover event handler.
...And 3 more matches
GlobalEventHandlers.ondragstart - Web APIs
a global event handler for the dragstart event.
... syntax var dragstarthandler = targetelement.ondragstart; return value dragstarthandler the dragstart event handler for element targetelement.
... example this example demonstrates using the ondragstart attribute handler to set an element's dragstart event handler.
...And 3 more matches
-moz-window-dragging
the -moz-window-dragging css property specifies whether a window is draggable or not.
... initial value drag applies to all elements that create native windows, e.g.
... <window>, <panel> inherited no media visual computed value as specified animation type discrete canonical order the unique non-ambiguous order defined by the formal grammar syntax the -moz-window-dragging property is specified as one of the keyword values listed below.
...And 2 more matches
nsIDragDropHandler
nsidragdrophandler is an interface for communicating with the built-in drag and drop implementation in the content area.
... content/base/public/nsidragdrophandler.idlscriptable please add a summary to this article.
... last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports method overview void detach(); void hookupto(in nsidomeventtarget attachpoint, in nsiwebnavigation navigator); methods detach() unregisters all handlers related to drag and drop.
...And 2 more matches
DragEvent.dataTransfer - Web APIs
the dragevent.datatransfer property holds the drag operation's data (as a datatransfer object).
... syntax let data = dragevent.datatransfer; return value data a datatransfer object which contains the drag event's data.
... example this example illustrates accessing the drag and drop data within the dragend event handler.
...And 2 more matches
Document: dragover event - Web APIs
the dragover event is fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).
... bubbles yes cancelable yes default action reset the current drag operation to "none".
... interface dragevent event handler property ondragover examples see the drag event for example code or this jsfiddle demo.
... specifications specification status comment html living standardthe definition of 'dragover' in that specification.
Document: dragstart event - Web APIs
the dragstart event is fired when the user starts dragging an element or text selection.
... bubbles yes cancelable yes default action initiate the drag-and-drop operation.
... interface dragevent event handler property ondragstart examples see the drag event for example code or this jsfiddle demo.
... specifications specification status comment html living standardthe definition of 'dragstart' in that specification.
Document: dragend event - Web APIs
the dragend event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key).
... bubbles yes cancelable no default action varies interface dragevent event handler property ondragend examples see the drag event for example code or this jsfiddle demo.
... specifications specification status comment html living standardthe definition of 'dragend' in that specification.
Document: dragenter event - Web APIs
the dragenter event is fired when a dragged element or text selection enters a valid drop target.
... interface dragevent event handler property ondragenter examples see the drag event for example code or this jsfiddle demo.
... specifications specification status comment html living standardthe definition of 'dragenter' in that specification.
Document: dragexit event - Web APIs
the dragexit event is fired when an element is no longer the drag operation's immediate selection target.
... interface dragevent event handler property ondragexit examples see the drag event for example code or this jsfiddle demo.
... specifications specification status comment html living standardthe definition of 'dragexit' in that specification.
Document: dragleave event - Web APIs
the dragleave event is fired when a dragged element or text selection leaves a valid drop target.
... interface dragevent event handler property ondragleave examples see the drag event for example code or this jsfiddle demo.
... specifications specification status comment html living standardthe definition of 'dragleave' in that specification.
:-moz-drag-over - CSS: Cascading Style Sheets
the :-moz-drag-over css pseudo-class is a mozilla extension that matches an element when a dragover event is called on it.
... syntax :-moz-drag-over examples html <table border="1"> <tr> <td width="100px" height="100px">drag over</td> </tr> </table> css td:-moz-drag-over { color: red; } result specifications not part of any standard.
backdrag - Archive of obsolete content
« xul reference home backdrag type: boolean setting the backdrag attribute on a xul panel lets the user move the panel by clicking and dragging anywhere on its background area.
dragging - Archive of obsolete content
« xul reference home dragging type: boolean this attribute will be set to true if the column is being dragged.
enableColumnDrag - Archive of obsolete content
« xul reference home enablecolumndrag type: boolean when set to true, the user may drag the column headers around to change the order in which they are displayed.
enableColumnDrag - Archive of obsolete content
« xul reference enablecolumndrag type: boolean when set to true, the user may drag the column headers around to change the order in which they are displayed.
Index - Web APIs
WebAPIIndex
782 datatransfer api, datatransfer, html drag and drop api, interface, needsmarkupwork, reference, web development, drag and drop the datatransfer object is used to hold the data that is being dragged during a drag and drop operation.
...for more information about drag and drop, see html drag and drop api.
... 783 datatransfer() api, constructor, datatransfer, html drag and drop api, reference, drag and drop the datatransfer constructor creates a new datatransfer object instance.
...And 76 more matches
Document - Web APIs
WebAPIDocument
globaleventhandlers.ondrag is an eventhandler representing the code to be called when the drag event is raised.
... globaleventhandlers.ondragend is an eventhandler representing the code to be called when the dragend event is raised.
... globaleventhandlers.ondragenter is an eventhandler representing the code to be called when the dragenter event is raised.
...And 18 more matches
Index - Archive of obsolete content
182 drag & drop code snippets 183 embedding svg code snippets no summary!
... 425 drag and drop mozilla, xul this section describes how to implement objects that can be dragged around and dropped onto other objects.
... 426 drag and drop example xul an example of implementing drag and drop will be implemented in this section.
...And 13 more matches
DataTransfer - Web APIs
the datatransfer object is used to hold the data that is being dragged during a drag and drop operation.
...for more information about drag and drop, see html drag and drop api.
... this object is available from the datatransfer property of all drag events.
...And 13 more matches
Event reference
drag & drop events event name fired when drag an element or text selection is being dragged (fired continuously every 350ms).
... dragend a drag operation is being ended (by releasing a mouse button or hitting the escape key).
... dragenter a dragged element or text selection enters a valid drop target.
...And 13 more matches
Color picker tool - CSS: Cascading Style Sheets
77; position: relative; float: right; } #delete #trash-can { width: 80%; height: 80%; border: 2px dashed #fff; border-radius: 5px; background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center; position: absolute; top: 10%; left: 10%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; transition: all 0.2s; } #delete[drag-state='enter'] { background-color: #999; } /** * color theme */ #color-theme { margin: 0 8px 0 0; border: 1px solid #eee; display: inline-block; float: right; } #color-theme .box { width: 80px; height: 92px; float: left; } /** * color info box */ #color-info { width: 360px; float: left; } #color-info .title { width: 100%; padding: 15px; font-size: 18px; text-align: center;...
...}; var handle = document.createelement('div'); handle.classname = 'resize-handle'; if (axis === 'width') action = 1; else if (axis === 'height') action = -1; else axis = 'both'; handle.classname = 'resize-handle'; handle.setattribute('data-resize', axis); handle.addeventlistener('mousedown', resizestart); elem.appendchild(handle); }; /*========== make an element draggable relative to it's parent ==========*/ var makedraggable = function makedraggable(elem, endfunction) { var offsettop; var offsetleft; elem.setattribute('data-draggable', 'true'); var dragstart = function dragstart(e) { e.preventdefault(); e.stoppropagation(); if (e.target.getattribute('data-draggable') !== 'true' || e.target !== elem || e.button !== 0) ...
...return; offsetleft = e.clientx - elem.offsetleft; offsettop = e.clienty - elem.offsettop; document.addeventlistener('mousemove', mousedrag); document.addeventlistener('mouseup', dragend); }; var dragend = function dragend(e) { if (e.button !== 0) return; document.removeeventlistener('mousemove', mousedrag); document.removeeventlistener('mouseup', dragend); }; var mousedrag = function mousedrag(e) { elem.style.left = e.clientx - offsetleft + 'px'; elem.style.top = e.clienty - offsettop + 'px'; }; elem.addeventlistener('mousedown', dragstart, false); }; return { makeresizable : makeresizable, makedraggable : makedraggable }; })(); /*========== color class ==========*/ var color = uicolorpicker.color; var hslcolo...
...And 12 more matches
XUL Events - Archive of obsolete content
attribute: oncontextmenu drag the drag event is sent to the source node (the node that was dragged) several times a second while the drag is occurring.
... attribute: ondrag dragdrop this event is sent when the user releases the mouse button to drop an object being dragged.
... the element, if it accepts the drop, should respond in some manner such inserting the dragged object into itself.
...And 9 more matches
Index
MozillaTechXPCOMIndex
402 nsiclipboarddragdrophooklist clipboard, interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference within gecko, this interface is used by calling get_interface on a docshell.
... 403 nsiclipboarddragdrophooks clipboard, interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference embedders who want to have these hooks made available should implement nsiclipboarddragdrophooks and use the command manager to send the appropriate commands with these parameters/settings: 404 nsiclipboardhelper clipboard, interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference this method copies string to (default) clipboard.
... 470 nsidomchromewindow dom, interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference on some operating systems, we must allow the window manager to handle window dragging.
...And 9 more matches
Splitters - Archive of obsolete content
an example is the mozilla browser window, where you can change the size of the sidebar panel by dragging the bar in-between the two frames.
... resizebefore when the splitter is dragged, the elements to the left (or above) resize.
... resizeafter when the splitter is dragged, the elements to the right (or below) resize.
...And 8 more matches
nsIHTMLEditor
inherits from: nsisupports last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) method overview void adddefaultproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void addinsertionlistener(in nsicontentfilter infilter); void align(in astring aalign); boolean breakisvisible(in nsidomnode anode); boolean candrag(in nsidomevent aevent); void checkselectionstateforanonymousbuttons(in nsiselection aselection); nsidomelement createanonymouselement(in astring atag, in nsidomnode aparentnode, in astring aanonclass, in boolean aiscreatedhidden); nsidomelement createelementwithdefaults(in astring atagname); void decreasefontsize(); void dodrag(in nsidomevent aevent); ...
...; void getlistitemstate(out boolean amixed, out boolean ali, out boolean adt, out boolean add); void getliststate(out boolean amixed, out boolean aol, out boolean aul, out boolean adl); astring getparagraphstate(out boolean amixed); nsidomelement getselectedelement(in astring atagname); nsidomelement getselectioncontainer(); void ignorespuriousdragevent(in boolean aignorespuriousdragevent); void increasefontsize(); void indent(in astring aindent); void insertelementatselection(in nsidomelement aelement, in boolean adeleteselection); void insertfromdrop(in nsidomevent aevent); void inserthtml(in astring ainputstring); void inserthtmlwithcontext(in astring ainputstring, in astring acontext...
... boolean breakisvisible( in nsidomnode anode ); parameters anode return value candrag() decides if a drag should be started (for example, based on the current selection and mousepoint).
...And 8 more matches
Index - Archive of obsolete content
ArchiveMozillaXULIndex
27 backdrag xul, xul attribute no summary!
... 104 dragging xul attributes, xul reference no summary!
... 113 enablecolumndrag xul attributes, xul reference no summary!
...And 7 more matches
Template and Tree Listeners - Archive of obsolete content
some useful functions of the observer are the drag and drop related callbacks to handle when an item is dragged onto the tree.
... this makes handling dragging onto a tree fairly simple.
...the tree observer receives drag related events in three places: over a container row, before a row, and after a row.
...And 7 more matches
nsIDroppedLinkHandler
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview boolean candroplink(in nsidomdragevent aevent, in prbool aallowsamedocument); astring droplink(in nsidomdragevent aevent, out astring aname, [optional] in boolean adisallowinherit); void droplinks(in nsidomdragevent aevent, [optional] in boolean adisallowinherit, [optional] out unsigned long acount, [retval, array, size_is(acount)] out nsidroppedlinkitem alinks); methods candroplink() determines if a link being dragged can be dropped.
... boolean candroplink( in nsidomdragevent aevent, in prbool aallowsamedocument ); parameters aevent a dragenter or dragover event.
... aallowsamedocument if false, drops are only allowed if the document of the source of the drag is different from the destination.
...And 7 more matches
DataTransfer.dropEffect - Web APIs
the datatransfer.dropeffect property controls the feedback (typically visual) the user is given during a drag and drop operation.
... it will affect which cursor is displayed while dragging.
... for the dragenter and dragover events, dropeffect will be initialized based on what action the user is requesting.
...And 7 more matches
DataTransfer.effectAllowed - Web APIs
the datatransfer.effectallowed property specifies the effect that is allowed for a drag operation.
... the copy operation is used to indicate that the data being dragged will be copied from its present location to the drop location.
... the move operation is used to indicate that the data being dragged will be moved, and the link operation is used to indicate that some form of relationship or connection will be created between the source and drop locations.
...And 7 more matches
Border-image generator - CSS: Cascading Style Sheets
<div class="separator"></div> <div class="property"> <div class="name">scale</div> <div class="ui-input-slider" data-topic="scale" data-unit="%" data-max="300" data-sensivity="10"> </div> </div> <div class="separator"></div> <div class="property"> <div class="name">draggable</div> <div class="ui-checkbox" data-topic='drag-subject'></div> </div> <div class="property right"> <div class="name">section height</div> <div class="ui-input-slider" data-topic="preview-area-height" data-min="400" data-max="1000"> </div> </div> </div> <di...
...-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } body[data-move='x'] { cursor: w-resize !important; } body[data-move='y'] { cursor: s-resize !important; } #container { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } [data-draggable='true']:hover { cursor: move; } [data-draggable='true']:hover > * { cursor: default; } /******************************************************************************/ /******************************************************************************/ /* * border image picker */ #gallery { box-shadow: 0 0 3px 0 #bababa; } #image-gallery { width: 600px; height: 100px; margin: 0 au...
...eturn { init : init, setvalue : setvalue, subscribe : subscribe, unsubscribe : unsubscribe }; })(); window.addeventlistener("load", function() { borderimage.init(); }); var borderimage = (function borderimage() { var getelembyid = document.getelementbyid.bind(document); var subject; var preview; var guidelines = []; var positions = ['top', 'right', 'bottom', 'left']; var makedraggable = function makedraggable(elem) { var offsettop; var offsetleft; elem.setattribute('data-draggable', 'true'); var dragstart = function dragstart(e) { if (e.target.getattribute('data-draggable') !== 'true' || e.target !== elem || e.button !== 0) return; offsetleft = e.clientx - elem.offsetleft; offsettop = e.clienty - elem.offsettop; document.addeventlistener('...
...And 7 more matches
splitter - Archive of obsolete content
when the splitter is dragged, the sibling elements of the splitter are resized.
...the vbox is used to hold the .png image that a user clicks on to resize the search bar.--> <splitter tooltiptext="resize the search box" oncommand="alert('the splitter was dragged')"> <vbox id="example_vbox" /> </splitter> attributes collapse type: one of the values below determines which side of the splitter is collapsed when its grippy is clicked.
... grow the elements to the right or below the splitter do not change size (unless they are flexible) when the splitter is dragged, but instead the entire container changes size.
...And 6 more matches
DataTransferItemList.add() - Web APIs
the datatransferitemlist.add() method creates a new datatransferitem using the specified data and adds it to the drag data list.
... syntax datatransferitem = datatransferitemlist.add(data, type); datatransferitem = datatransferitemlist.add(file); parameters data a string representing the drag item's data.
... type a string of the drag item's type.
...And 6 more matches
Using files from web applications - Web APIs
this selection can be done by either using an html <input type="file"> element or by drag and drop.
...(as of time of writing, firefox doesn’t show this visual cue for <input type="file"> elements.) selecting files using drag and drop you can also let the user drag and drop files into your web application.
...exactly what part of your content will accept drops may vary depending on the design of your application, but making an element receive drop events is easy: let dropbox; dropbox = document.getelementbyid("dropbox"); dropbox.addeventlistener("dragenter", dragenter, false); dropbox.addeventlistener("dragover", dragover, false); dropbox.addeventlistener("drop", drop, false); in this example, we're turning the element with the id dropbox into our drop zone.
...And 6 more matches
ARIA Test Cases - Accessibility
tested ua/at combinations: dragon 10 with firefox 3 and ie 8 beta 2 jaws 9 & 10 with firefox 3 jaws 9 & 10 with ie beta 2 nvda 0.6p2 with firefox 3 orca with firefox 3 window-eyes 7 with ie 8 beta 2 and firefox 3 voiceover (leopard) with safari 4.0.2 zoom (leopard) with safari 4.0.2, firefox 3.x and opera 9.x zoomtext 9.1 with firefox 3 and ie 8 beta 2 test case structure test cases are organized as follows: test ...
... at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 pass fail - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - drag and drop tic tac toe slide show expected at behavior: (mz) once focusing or arrowing onto the draggable item, screen reader should indicate that item can be an object that can be dragged.
... once marked for drag and drop, screen reader should announce that this item has been picked up, to distinguish it from others that may be draggable, but are currently not selected for the operation.
...And 6 more matches
DataTransfer.clearData() - Web APIs
the datatransfer.cleardata() method removes the drag operation's drag data for the given type.
... this method does not remove files from the drag operation, so it's possible for there still to be an entry with the type "files" left in the object's datatransfer.types list if there are any files included in the drag.
... this method can only be used in the handler for the dragstart event, because that's the only time the drag operation's data store is writeable.
...And 5 more matches
DataTransfer.types - Web APIs
the datatransfer.types read-only property returns an array of the drag data formats (as strings) that were set in the dragstart event.
... the order of the formats is the same order as the data included in the drag operation.
... syntax datatransfer.types; return value an array of the data formats used in the drag operation.
...And 5 more matches
DataTransferItemList.clear() - Web APIs
the datatransferitemlist method clear() removes all datatransferitem objects from the drag data items list, leaving the list empty.
... the drag data store in which this list is kept is only writable while handling the dragstart event.
... while handling drop, the drag data store is in read-only mode, and this method silently does nothing.
...And 5 more matches
DataTransferItemList.length - Web APIs
the read-only length property of the datatransferitemlist interface returns the number of items currently in the drag item list.
... syntax length = datatransferitemlist.length; value the number of drag data items in the list, or 0 if the list is empty or disabled.
... the drag item list is considered to be disabled if the item list's datatransfer object is not associated with a drag data store.
...And 5 more matches
User input and controls - Developer guides
relevant apis and events include touch events, pointer lock api, screen orientation api, fullscreen api, drag & drop and more.
... using features such as contenteditable elements you can implement fast rich-text editors and with drag&drop let users moving elements inside your app.
... when the input device is a mouse, you can also control user input through the pointer lock api and implement drag & drop (see below).
...And 5 more matches
DataTransfer.getData() - Web APIs
the datatransfer.getdata() method retrieves drag data (as a domstring) for the specified type.
... if the drag operation does not include data, this method returns an empty string.
... return value domstring a domstring representing the drag data for the specified format.
...And 4 more matches
DataTransfer.setData() - Web APIs
the datatransfer.setdata() method sets the drag operation's drag data to the specified data and type.
... if data for the given type does not exist, it is added at the end of the drag data store, such that the last item in the types list will be the new type.
... syntax void datatransfer.setdata(format, data); arguments format a domstring representing the type of the drag data to add to the drag object.
...And 4 more matches
DataTransferItemList.DataTransferItem() - Web APIs
syntax dataitem = datatransferitem[index]; parameters index the zero-based index of the item in the drag data list to return.
... example this example shows how to use drag and drop.
... javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
...And 4 more matches
DataTransferItemList.remove() - Web APIs
syntax datatransferitemlist.remove(index); parameters index the zero-based index number of the item in the drag data list to remove.
... exceptions invalidstateerror the drag data store is not in read/write mode, so the item can't be removed.
... javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
...And 4 more matches
GlobalEventHandlers - Web APIs
globaleventhandlers.ondrag is an eventhandler representing the code to be called when the drag event is raised.
... globaleventhandlers.ondragend is an eventhandler representing the code to be called when the dragend event is raised.
... globaleventhandlers.ondragenter is an eventhandler representing the code to be called when the dragenter event is raised.
...And 4 more matches
Global attributes - HTML: Hypertext Markup Language
the event handler attributes: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechang...
... draggable an enumerated attribute indicating whether the element can be dragged, using the drag and drop api.
... it can have the following values: true, which indicates that the element may be dragged false, which indicates that the element may not be dragged.
...And 4 more matches
CustomizableUI.jsm
onwidgetdrag(awidgetid, aarea) fired both when and after customize mode drag handling system tries to determine the width and height of widget awidgetid when dragged to a different area.
... aarea will be the area the item is dragged to, or undefined after the measurements have been done and the node has been moved back to its 'regular' area.
...lacementofwidget(awidgetid); bool iswidgetremovable(awidgetnodeorwidgetid); bool canwidgetmovetoarea(awidgetid); void getlocalizedproperty(awidget, aprop, aformatargs, adef); void hidepanelfornode(anode); bool isspecialwidget(awidgetid); void addpanelcloselisteners(apanel); void removepanelcloselisteners(apanel); void onwidgetdrag(awidgetid, aarea); void notifystartcustomizing(awindow); void notifyendcustomizing(awindow); void dispatchtoolboxevent(aevent, adetails, awindow); bool isareaoverflowable(aareaid); void settoolbarvisibility(atoolbarid, aisvisible); string getplaceforitem(aelement); bool isbuiltintoolbar(atoolbarid); methods addlistener() add ...
...And 3 more matches
nsITreeView
ined in gecko 1.8 progress_none 3 note: renamed from progressnone in gecko 1.8 drop_before -1 drop_on 0 drop_after 1 indropbefore 0 obsolete since gecko 1.8 indropon 1 obsolete since gecko 1.8 indropafter 2 obsolete since gecko 1.8 methods candrop() methods used by the drag feedback code to determine if a drag is allowable at the current location.
... datatransfer this parameter, added in gecko 1.9.2, provides the data being dragged, so that it can be examined to determine if a drop is possible.
... candropbeforeafter() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method used by the drag feedback code to determine if a drag is allowable at the current location.
...And 3 more matches
DataTransfer.items - Web APIs
the read-only datatransfer property items property is a list of the data transfer items in a drag operation.
... syntax itemlist = datatransfer.items; return value a datatransferitemlist object containing datatransferitem objects representing the items being dragged in a drag operation, one list item for each object being dragged.
... if the drag operation had no data, the list is empty.
...And 3 more matches
DataTransfer.mozSourceNode - Web APIs
the datatransfer.mozsourcenode property is used to determine the node over which the mouse cursor was located when the the drag operation was initiated (for example, when a <button> was clicked).
... for external drags or if the calling function cannot reach the node, null is returned.
... syntax datatransfer.mozsourcenode; return value a node representing node where the drag originated.
...And 3 more matches
DataTransferItem.kind - Web APIs
the read-only datatransferitem.kind property returns a datatransferitem representing the drag data item kind: some text or some file.
... syntax var itemkind = datatransferitem.kind; return value a domstring representing the drag data item's kind.
... it must be one of the following values: 'file' if the drag data item is a file.
...And 3 more matches
DataTransferItem - Web APIs
the datatransferitem object represents one drag data item.
... during a drag operation, each drag event has a datatransfer property which contains a list of drag data items.
... properties datatransferitem.kind read only the kind of drag data item, string or file.
...And 3 more matches
DataTransferItemList - Web APIs
the datatransferitemlist object is a list of datatransferitem objects representing items being dragged.
... during a drag operation, each dragevent has a datatransfer property and that property is a datatransferitemlist.
... properties datatransferitemlist.length read only an unsigned long that is the number of drag items in the list.
...And 3 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
ding: 0.3em 10%; line-height: 1.6em; } .ui-dropdown-list > div:hover { background: #3490d2; color:#fff; border-radius: 2px; cursor: pointer; } /* * color picker tool */ body { width: 100%; height: 100%; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } body[data-dragging="true"] { } /** * resize handle */ .resize-handle { width: 10px; height: 10px; background: url("images/resize.png") center center no-repeat; position: absolute; bottom: 0; right: 0; } [data-resize='both']:hover { cursor: nw-resize !important; } [data-resize='width']:hover { cursor: w-resize !important; } [data-resize='height']:hover { cursor: n-resize !important; } /** * mai...
...und-color: #5cda9b; } #gradient-axes .axis[axisid='2'] { background-color: #5c9bda; } #gradient-axes .axis[axisid='3'] { background-color: #5c5cda; } #add-axis.button { margin: 0 38px 0 0; float: right; } #gradient-order { width: 60%; height: 5px; margin: 5px 0 0 0; overflow: visible; background-color: #ccc; position: relative; } #gradient-order:before { content: "gradient order - drag to order"; position: absolute; top: 100%; color: #ccc; } #gradient-order:after { content: ""; width: 24px; height: 24px; background: url('images/arrow.svg'); background-size: 24px 24px; position: absolute; right: -10px; top: -9.5px; } /** * output */ #output { width: 100%; padding: 10px 0; margin: 20px 0 50px 0; border: 2px dashed #ccc; border-radius: 5px; display: table; ...
...on', this.cssposition); if (this.axis.num_points > 2) axesmanager.setdeletebuttonstate('active'); }; gradientpoint.prototype.deactivate = function deactivate() { this.node.removeattribute('data-active'); }; gradientpoint.prototype.startmove = function startmove(e) { this.axis.updatecenterpointpos(); this.node.setattribute('data-active', 'true'); document.body.setattribute('data-dragging', 'true'); }; gradientpoint.prototype.endmove = function endmove(e) { this.node.removeattribute('data-active', 'true'); document.body.removeattribute('data-dragging'); }; gradientpoint.prototype.updatepositionm = function updatepositionm(e) { var a = this.axis; var qx = e.clientx - a.centerx; var qy = e.clienty - a.centery; this.position = (a.px * qx + a.py * qy) / a.pmod + ...
...And 3 more matches
Styling a Tree - Archive of obsolete content
::-moz-tree-drop-feedback: the drag and drop feedback.
... dragsession this property is set if something is currently being dragged.
... dropon if a drag is occuring over the tree, this property is set for the row currently being dragged over, as long as the mouse pointer is hovering over the row.
...And 2 more matches
Mobile touch controls - Game development
the preventdefault() function is needed to prevent the browser from moving — without it you'd have the default behaviour, and the canvas would be dragged around the page, which would show the browser scroll bars and look messy.
... this approach uses the generally available this.game.input object, but you can also detect the actions on any game objects like sprites or buttons by using oninputover, oninputout, oninputdown, oninputup, ondragstart, or ondragstop: this.button.events.oninputover.add(itemtouched, this); function itemtouched(button, pointer) { // do something } that way you'll be able to attach an event to any object in the game, like the player's ship, and react to the actions performed by the user.
... moving the player could be managed by creating the four directional buttons, but we can take the advantage of touch screens and drag the player's ship around: var player = this.game.add.sprite(30, 30, 'ship'); player.inputenabled = true; player.input.enabledrag(); player.events.ondragstart.add(ondragstart, this); player.events.ondragstop.add(ondragstop, this); function ondragstart(sprite, pointer) { // do something when dragging } we can pull the ship around and do something in the meantime, and react when the drag is s...
...And 2 more matches
nsINavHistoryResultViewObserver
void oncyclecell(in long row, in nsitreecolumn column); void onselectionchanged(); void onperformaction(in wstring action); void onperformactiononrow(in wstring action, in long row); void onperformactiononcell(in wstring action, in long row, in nsitreecolumn column); constants constant value description drop_before -1 the drag operation wishes to insert the dragged item before the indicated row.
... drop_on 0 the drag operation wishes to drop the dragged item onto the indicated row.
... drop_after 1 the drag operation wishes to insert the dragged item after the indicated row.
...And 2 more matches
DataTransfer.mozSetDataAt() - Web APIs
the datatransfer.mozsetdataat() method is used to add data to a specific index in the drag event's data transfer object.
... syntax void datatransfer.mozsetdataat([type], data, index); arguments type a string representing the type of the drag data to add to the drag data object.
... data a nsivariant representing the data to add to the drag data object.
...And 2 more matches
DataTransfer.mozUserCancelled - Web APIs
the datatransfer.mozusercancelled property is used in the dragend event handler to determine if the user canceled the drag or not.
...this property only applies to the dragend event.
... syntax datatransfer.mozusercancelled; return value a boolean representing true if the user canceled the drag event and returns false otherwise.
...And 2 more matches
DataTransferItem.getAsFile() - Web APIs
if the item is a file, the datatransferitem.getasfile() method returns the drag data item's file object.
... return value file if the drag data item is a file, a file object is returned; otherwise null is returned.
...event.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("...
...And 2 more matches
DataTransferItem.getAsString() - Web APIs
the datatransferitem.getasstring() method invokes the given callback with the drag data item's string data as the argument if the item's kind is a plain unicode string (i.e.
... return value undefined callback the callback parameter is a callback function which accepts one parameter: domstring the drag data item's string data.
... = ev.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("...
...And 2 more matches
DataTransferItem.type - Web APIs
the read-only datatransferitem.type property returns the type (format) of the datatransferitem object representing the drag data item.
... syntax dataitem.type; return value a domstring representing the drag data item's type.
... = ev.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("...
...And 2 more matches
The HTML DOM API - Web APIs
dragging and dropping of content on webpages.
...discussion of other areas, such as drag and drop, websockets, web storage, etc.
... event handlers for document events defined by the html standard to allow access to mouse and keyboard events, drag and drop, media control, and more.
...And 2 more matches
Adding Events and Commands - Archive of obsolete content
drag and drop.
... drag and drop operations involve several events.
... since drag and drop is a complicated thing to manage, there are some high level wrappers that facilitate working with it.
... also keep in mind that there are 2 drag and drop apis, the newest (and preferred) one introduced in firefox 3.5.
More Tree Features - Archive of obsolete content
more about tree columns one additional attribute you can add to the tree is enablecolumndrag.
... (note the mixed case.) if set to true, the user may drag the column headers around to rearrange the order of the columns.
...a small notch will appear in between each column header which the user may drag to change the width of a column.
...you will need to save a number of attributes as indicated in the example below: example 2 : source view <tree enablecolumndrag="true" flex="1"> <treecols> <treecol id="runner" label="runner" flex="2" persist="width ordinal hidden" /> <splitter class="tree-splitter" /> <treecol id="city" label="home city" flex="2" persist="width ordinal hidden" /> <splitter class="tree-splitter" /> <treecol id="starttime" label="start time" flex="1" persist="width ordinal hidden" /> <splitter class="tree-splitter...
Using the Editor from XUL - Archive of obsolete content
editor event handling editing operations happen in response to user events: mouse, key, drag and drop, and ime (international text input) events.
...for text widgets and composer): nstexteditorkeylistener (as a nsidomkeylistener) nstexteditormouselistener (as a nsidommouselistener) nstexteditorfocuslistener (as a nsidomfocuslistener) nstexteditortextlistener (as a nsidomtextlistener) nstexteditorcompositionlistener (as a nsidomcompositionlistener) nstexteditordraglistener (as a nsidomdraglistener) in nseditorshell::preparedocumentforediting(), we install a mouse listener.
... nstexteditordraglistener the drag listener handles drag and drop events in the editor.
... it responds to the start of a drag in draggesture by adding data to the drag, notifies the drag whether a drop can occur in dragover, and handles the drop by inserting data in dragdrop.
nsITransferable
these objects are used during drag-and-drop operations.
... note: currently, this can only be used on windows (in order to support network principal information in drag operations).
... kfilepromisemime application/x-moz-file-promise a dataless flavor used to interact with the operating system during file drags.
... kfilepromisedirectorymime application/x-moz-file-promise-dir a synthetic flavor which is added to the transferable once the destination directory for a file drag is known.
Examine and edit HTML - Firefox Developer Tools
the shadow root is signified by a node named #shadow-root — you can click its expansion arrow to see the full contents of the shadow dom, and then manipulate the contained nodes in a similar way to other part of the page's dom (although with a limited featureset — you can't, for example, drag and drop or delete shadow dom nodes).
... drag and drop you can reorganize the html content of a page by moving nodes in the html tree.
... just click and hold on any element and drag it up or down in the tree.
... when you release the mouse button, the element will be inserted at the corresponding position: you can cancel the drag and drop by pressing the esc key.
DataTransfer.addElement() - Web APIs
the datatransfer.addelement() method sets the drag source to the given element.
... this element will be the element to which drag and dragend events are fired, and not the defaut target (the node that was dragged).
... syntax void datatransfer.addelement(el); arguments el the element to set as the drag source.
... return value void example this example shows the use of the addelement() method function change_drag_node(event, node) { var dt = event.datatransfer; dt.addelement(node); } specifications this method is not defined in any web standard.
DataTransfer.files - Web APIs
the datatransfer.files property is a list of the files in the drag operation.
... this feature can be used to drag files from a user's desktop to the browser.
... syntax datatransfer.files; return value a list of the files in a drag operation, one list item for each file in the operation.
... if the drag operation had no files, the list is empty.
DataTransfer.mozCursor - Web APIs
the datatransfer.mozcursor property returns or sets the drag cursor's state.
... this is primarily used to control the cursor during tab drags.
... default uses the default gecko behavior, which is to set the cursor to an arrow during the drag operation.
... function drop_handler(event) { var dragdata = event.datatransfer; console.log("mozcursor = " + dragdata.mozcursor); } specifications this property is not defined in any web standard.
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
related myth: msaa is not supported by at vendors reality: it's a standard, and it is supported by jaws, window-eyes, zoomtext, dragon and supernova/hal.
...it may be a good enough solution; however, if what you need is jaws, dragon and zoomtext support.
... zoomtext and dragon can get by with your msaa support., and jaws can be scripted (even by external developers) to support alternative interfaces.
..._alerts] event_system_foreground event_system_menustart [important] event_system_menuend [important] event_system_menupopupstart [important] event_system_menupopupend [important] event_system_capturestart event_system_captureend event_system_movesizestart event_system_movesizeend event_system_contexthelpstart event_system_contexthelpend event_system_dragdropstart event_system_dragdropend event_system_dialogstart event_system_dialogend event_system_scrollingstart event_system_scrollingend [possibly important, talk to at vendor] event_system_switchstart event_system_switchend event_system_minimizestart event_system_minimizeend event_object_create [don't implement, watching system generated versions of this eve...
Cubic Bezier Generator - CSS: Cascading Style Sheets
ment.getelementbyid('x2').value; var y2 = document.getelementbyid('y2').value; drawbeziercurve(x1, y1, x2, y2); } const radius = 4; // place needed to draw the rulers const rulers = 30.5; const margin = 10.5; const basic_scale_size = 5; // size of 0.1 tick on the rulers var scaling; //limitation: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated var dragsm = 0; // drag state machine: 0 = nodrag, others = object being dragged function initcanvas() { // get the canvas element using the dom var canvas = document.getelementbyid('bezier'); // make sure we don't execute when canvas isn't supported if (canvas.getcontext) { // use getcontext to use the canvas for drawing var ctx = canvas.getcontext('2d'); scalin...
...var x = e.pagex - canvas.offsetleft; var y = e.pagey - canvas.offsettop; var output = document.getelementbyid('output'); output.value = "(" + x + "," + y + ") should be (" + x1 + "," + y1 + ")"; if ((x1 + radius >= x) && (x1 - radius <= x) && (y1 + radius >= y) && (y1 - radius <= y)) { var output = document.getelementbyid('output'); output.value = "p1!"; dragsm = 1; } var x2 = cx(document.getelementbyid('x2').value); var y2 = cy(document.getelementbyid('y2').value); if ((x2 + radius >= x) && (x2 - radius <= x) && (y2 + radius >= y) && (y2 - radius <= y)) { var output = document.getelementbyid('output'); output.value = "p2!"; dragsm = 2; } // if we are starting a drag if (dragsm != 0) { can...
...vas.onmousemove = mousemove; } } function mouseup(e) { var output = document.getelementbyid('output'); output.value = "mouse up!"; dragsm = 0; canvas.onmousemove = null; } function mousemove(e) { if (dragsm != 0) { var canvas = document.getelementbyid('bezier'); var x = e.pagex - canvas.offsetleft; var y = e.pagey - canvas.offsettop; var output = document.getelementbyid('output'); output.value = "drag!"; if (dragsm == 1) { var x1 = document.getelementbyid('x1'); var y1 = document.getelementbyid('y1'); x1.value = reversex(x); x1.value = math.round(x1.value * 10000) / 10000; y1.value = reversey(y); y1.value = math.round(y1.value * 10000) / 10000; ...
... if (x1.value < 0) { x1.value = 0; } if (x1.value > 1) { x1.value = 1; } } else if (dragsm == 2) { var x2 = document.getelementbyid('x2'); var y2 = document.getelementbyid('y2'); x2.value = reversex(x); x2.value = math.round(x2.value * 10000) / 10000; y2.value = reversey(y); y2.value = math.round(y2.value * 10000) / 10000; if (x2.value < 0) { x2.value = 0; } if (x2.value > 1) { x2.value = 1; } } updatecanvas(); } } initcanvas(); updatecanvas(); this is a sample tool; it lets you edit bezier curves.
dropzone - HTML: Hypertext Markup Language
the dropzone global attribute is an enumerated attribute indicating what types of content can be dropped on an element, using the html drag and drop api.
... it can have the following values: copy, which indicates that dropping will create a copy of the element that was dragged.
... move, which indicates that the element that was dragged will be moved to this new location.
... link, which will create a link to the dragged data.
panel - Archive of obsolete content
ArchiveMozillaXULpanel
attributes backdrag, close, consumeoutsideclicks, fade, flip, ignorekeys, label, left, level, noautofocus, noautohide, norestorefocus, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, titlebar, top, type properties accessibletype, label, popupboxobject, popup, state methods hidepopup, moveto, openpopup, openpopupatscreen, sizeto examples the following example shows how a panel may ...
... <panel id="thepanel"> <hbox align="start"> <image src="warning.png"/> <vbox> <description value="you have 6 new messages."/> <hbox> <button label="read mail"/> <button label="new message"/> </hbox> </vbox> </hbox> </panel> <description value="6 new messages" popup="thepanel"/> attributes backdrag type: boolean setting the backdrag attribute on a xul panel lets the user move the panel by clicking and dragging anywhere on its background area.
... drag specify this for a panel that's being used as a drag image for a drag and drop operation.
tree - Archive of obsolete content
ArchiveMozillaXULtree
attributes disablekeynavigation, disabled, editable, enablecolumndrag, flags, hidecolumnpicker, onselect, rows, seltype, statedatasource, tabindex, treelines properties accessibletype, builderview, columns, contentview, currentindex, disablekeynavigation, disabled, editingcolumn, editingrow, enablecolumndrag, firstordinalcolumn, inputfield, seltype, selstyle, tabindex, treeboxobject, view examples a tree with several columns <tree flex="1" rows="2"> <tr...
... enablecolumndrag type: boolean when set to true, the user may drag the column headers around to change the order in which they are displayed.
... enablecolumndrag type: boolean when set to true, the user may drag the column headers around to change the order in which they are displayed.
treecol - Archive of obsolete content
attributes crop, cycler, dragging, editable, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortactive, sortdirection, src, type, width properties accessibletype style classes treecol-image examples this example shows a checkbox in the first column, requires the style below.
... dragging type: boolean this attribute will be set to true if the column is being dragged.
...if false or not specified, the user can adjust the size of the column, typically by dragging the column header with the mouse.
Theme changes in Firefox 3 - Archive of obsolete content
all file list all platforms file description of change browser/themes/*/browser/browser.css the width of the drag and drop indicator is no longer calculated during the drag (tabbrowser.xml).
...as a result, the 'display' property should be removed from .tab-drop-indicator-bar (including for dragging="true").
... mac os x file description of change browser/themes/pinstripe/browser/tabbrowser/tabdragindicator.png removed superfluous blank pixels from the edges, so that the image is smaller.
Building up a basic demo with PlayCanvas editor - Game development
you can drag it around or apply new values in the right panel.
... now we can apply the colored material to the shape by clicking and dragging its icon from the bottom part of the screen (the little dot on the left hand side of the material's name — it can be a bit fiddly to select; just persevere) onto the box on the scene.
... click diffuse, then click the color picker — give it an orange color (we used ff9500.) drag and drop the cylindermaterial icon onto the cylinder object on the sceene to apply that color.
Mobile accessibility - Learn web development
you can also "explore by touch" — hold your finger down on the screen and drag it around, and your device will read out the different apps/items you move across.
... if you try to control our simple-box-drag.html (see example live) example with a keyboard or touch, you'll see the problem.
...control, you need to use different, yet equivalent events — for example, touch events work on touchscreen devices: div.ontouchstart = function(e) { initialboxx = div.offsetleft; initialboxy = div.offsettop; positionhandler(e); movepanel(); } panel.ontouchend = stopmove; we've provided a simple example that shows how to use the mouse and touch events together — see multi-control-box-drag.html (see the example live also).
Embedding Tips
how do i disable drag/drop support?
...this implementation should also implement nsiclipboarddragdrophooks.
...r<nsicommandmanager> commandmanager = do_getinterface(iwebbrowser); if (commandmanager) { nscomptr<nsidomwindow> thedomwindow = do_getinterface(iwebbrowser); nscomptr<nsicommandparams> cmdparamsobj = do_createinstance(ns_command_params_contractid,&rv); cmdparamsobj->setisupportsvalue("addhook", reinterpret_cast<nsisupports*>(ichromeimplementation)); commandmanager->docommand("cmd_clipboarddragdrophook", cmdparamsobj, thedomwindow); } ...
Gecko object attributes
applied to: any widget that accepts input exposed via aria: aria-datatype exposed in xforms: from boud instance node datatype draggable true when the accessible object can be grabbed.
... dropeffect indicates what functions can be performed when the dragged object is released on the drop target.
... grabbed true when the accessible object has been selected for dragging.
nsIAccessibleEvent
event_dragdrop_start 0x0022 0x001f an application is about to enter drag-and-drop mode.
... event_dragdrop_end 0x0023 0x0020 an application is about to exit drag-and-drop mode.
... event_defactionchange 0x8011 event_acceleratorchange 0x8012 event_menustart 0x0004 event_menuend 0x0005 event_menupopupstart 0x0006 event_menupopupend 0x0007 event_capturestart 0x0008 event_captureend 0x0009 event_movesizestart 0x000a event_movesizeend 0x000b event_contexthelpstart 0x000c event_contexthelpend 0x000d event_dragdropstart 0x000e event_dragdropend 0x000f event_dialogstart 0x0010 event_dialogend 0x0011 event_scrollingstart 0x0012 event_scrollingend 0x0013 event_minimizestart 0x0016 event_minimizeend 0x0017 event_atk_property_change 0x0100 event_atk_selection_change 0x0101 event_atk_text_change 0x0102 event_atk_text_selection_change 0x0103 ...
nsIPlacesView
method overview nsinavhistoryresultnode[] getdragableselection(); nsinavhistoryresultnode[][] getremovableselectionranges(); nsinavhistoryresult getresult(); nsinavhistorycontainerresultnode getresultnode(); nsinavhistoryresultnode[] getselectionnodes(); void selectall(); attributes attribute type description hasselection boolean whether or not there are selected ...
... methods getdragableselection() returns an array of selected nsinavhistoryresultnode objects that can be dragged from the view.
... nsinavhistoryresultnode[] getdragableselection(); parameters none.
Drawing and Event Handling - Plugins
the browser and the plug-in can both install drag manager handlers for the shared port.
... because the drag manager calls both handlers no matter where the cursor is, the browser does not show the drag highlight when the cursor is over an instance rectangle.
...the plug-in can then show the drag highlight and handle drops when they occur within the instance rectangle.
Work with animations - Firefox Developer Tools
this article covers three tools you can use to visualize and edit animations: the animation inspector editing @keyframes editing timing functions animation inspector the page inspector's animations view displays animations in the page synchronized along a timeline, with a draggable widget you can use to move to any point in the timeline and see the page at that point.
... finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when.
...if you click the icon you get a visual editor for the curve, enabling you to drag p1 and p2, and see the results in the page: this feature uses open source code from lea verou’s cubic-bezier.com.
DataTransfer.mozClearDataAt() - Web APIs
syntax void datatransfer.mozcleardataat([type], index); arguments type a string representing the type of the drag data to remove from the drag data object.
... return value void example this example shows the use of the mozcleardataat() method in a dragend event handler.
... function dragend_handler(event) { var dt = event.datatransfer; // remove a text/html item dt.mozcleardataat("text/html", 1); } specifications this method is not defined in any web standard.
DataTransfer.mozItemCount - Web APIs
the datatransfer.mozitemcount property returns the number of items being dragged.
... this can be used, for example, to get the number of files being dragged.
... syntax datatransfer.mozitemcount; return value a number representing the number of items being dragged.
DataTransferItem.webkitGetAsEntry() - Web APIs
<p>drag files and/or directories to the box below!</p> <div id="dropzone"> <div id="boxtitle"> drop files here </div> </div> <h2>directory tree:</h2> <ul id="listing"> </ul> css content the styles used by the example are shown here.
...first, we prevent the dragover event from being handled by the default handler, so that our drop zone can receive the drop: dropzone.addeventlistener("dragover", function(event) { event.preventdefault(); }, false); the event handler that kicks everything off, of course, is the handler for the drop event: dropzone.addeventlistener("drop", function(event) { let items = event.datatransfer.items; event.preventdefa...
...find some files and directories and drag them in, and take a look at the resulting output.
FileSystemDirectoryReader.readEntries() - Web APIs
<p>drag files and/or directories to the box below!</p> <div id="dropzone"> <div id="boxtitle"> drop files here </div> </div> <h2>directory tree:</h2> <ul id="listing"> </ul> css content the styles used by the example are shown here.
...first, we prevent the dragover event from being handled by the default handler, so that our drop zone can receive the drop: dropzone.addeventlistener("dragover", function(event) { event.preventdefault(); }, false); the event handler that kicks everything off, of course, is the handler for the drop event: dropzone.addeventlistener("drop", function(event) { let items = event.datatransfer.items; event.preventdefa...
...find some files and directories and drag them in, and take a look at the resulting output.
File and Directory Entries API - Web APIs
only for accessing files which are selected by the user in a file <input> element (see htmlinputelement as well) or when a file or directory is provided to the web site or app using drag and drop.
... getting access to a file system there are two ways to get access to file systems defined in the current specification draft: when handling a drop event for drag and drop, you can call datatransferitem.webkitgetasentry() to get the filesystementry for a dropped item.
... the htmlinputelement.webkitentries property lets you access the filesystemfileentry objects for the currently selected files, but only if they are dragged-and-dropped onto the file chooser (bug 1326031).
XRSession.onsqueezeend - Web APIs
if heldobject has an object reference, that object is passed to a function called cancelobjectdrag(), which would be written to return the object to its original position.
... this takes care of the situation in which the drag is aborted or canceled.
... xrsession.onsqueezeend = event => { if (event.inputsource.handedness == user.handedness) { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace; if (user.heldobject) { cancelobjectdrag(user.heldobject); } } }; this code presumes that if the user actually intentionally completed the drag, user.heldobject will be null here.
XRSession: selectend event - Web APIs
the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up.
... mybegintracking() returns an object representing the object the user has begun to drag.
... the selectend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's transform.
XRSession: selectstart event - Web APIs
the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up.
... mybegintracking() returns an object representing the object the user has begun to drag.
... the selectend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's transform.
XRSession: squeezeend event - Web APIs
the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up.
... mybegintracking() returns an object representing the object the user has begun to drag.
... the squeezeend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's transform.
XRSession: squeezestart event - Web APIs
the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up.
... mybegintracking() returns an object representing the object the user has begun to drag.
... the squeezeend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's transform.
Mozilla CSS extensions - CSS: Cascading Style Sheets
heme) :-moz-system-metric(scrollbar-end-backward) :-moz-system-metric(scrollbar-end-forward) :-moz-system-metric(scrollbar-start-backward) :-moz-system-metric(scrollbar-start-forward) :-moz-system-metric(scrollbar-thumb-proportional) :-moz-system-metric(touch-enabled) :-moz-system-metric(windows-default-theme) -moz-user-focus -moz-user-input -moz-user-modify -moz-window-dragging -moz-window-shadow formerly proprietary properties that are now standard note: to maximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones listed below.
...9 -moz-bg-outsetobsolete since gecko 1.9 -moz-bg-solidobsolete since gecko 1.9 <color> keywords -moz-activehyperlinktext -moz-hyperlinktext -moz-visitedhyperlinktext -moz-buttondefault -moz-buttonhoverface -moz-buttonhovertext -moz-default-background-color -moz-default-color -moz-cellhighlight -moz-cellhighlighttext -moz-field -moz-fieldtext -moz-dialog -moz-dialogtext -moz-dragtargetzone -moz-mac-accentdarkestshadow -moz-mac-accentdarkshadow -moz-mac-accentface -moz-mac-accentlightesthighlight -moz-mac-accentlightshadow -moz-mac-accentregularhighlight -moz-mac-accentregularshadow -moz-mac-chrome-active -moz-mac-chrome-inactive -moz-mac-focusring -moz-mac-menuselect -moz-mac-menushadow -moz-mac-menutextselect -moz-menuhover -moz-menuhovertext -moz-win-com...
... -moz-all -moz-none width, min-width, and max-width -moz-min-content -moz-fit-content -moz-max-content -moz-available pseudo-elements and pseudo-classes a – d ::-moz-anonymous-block eg@:- bug 331432 ::-moz-anonymous-positioned-block :-moz-any :-moz-any-link [matches :link and :visited] :-moz-broken ::-moz-canvas ::-moz-color-swatch ::-moz-cell-content :-moz-drag-over f – i :-moz-first-node ::-moz-focus-inner ::-moz-focus-outer :-moz-focusring :-moz-full-screen :-moz-full-screen-ancestor :-moz-handler-blocked :-moz-handler-crashed :-moz-handler-disabled ::-moz-inline-table l :-moz-last-node :-moz-list-bullet :-moz-list-number :-moz-loading :-moz-locale-dir(ltr) :-moz-locale-dir(rtl) :-moz-lwtheme :-moz-lwtheme-brighttext :...
cursor - CSS: Cascading Style Sheets
WebCSScursor
drag & drop alias an alias or shortcut is to be created.
... grab something can be grabbed (dragged to be moved).
... grabbing something is being grabbed (dragged to be moved).
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
drag it onto the toolbar, and click it to make sure it works correctly.
...drag and drop the xpi file onto your browser window to start the installation.
Index of archived content - Archive of obsolete content
bootstrapped extensions code snippets alerts and notifications autocomplete bookmarks boxes canvas code snippets cookies customizing the download progress bar delayed execution dialogs and prompts downloading files drag & drop embedding svg examples and demos from articles file i/o finding window handles forms related code snippets html in xul for rich tooltips html to dom isdefaultnamespace js xpcom javascript debugger service javascript timers ...
... dehydra frequently asked questions dehydra function reference dehydra object reference installing dehydra using dehydra developing new mozilla features devmo 1.0 launch roadmap download manager improvements in firefox 3 download manager preferences drag and drop drag and drop example drag and drop javascript wrapper drag and drop events editor embedding guide embedding faq embedding mozilla in a java application using javaxpcom error console exception logging in javascript existing content extension frequen...
Getting Started - Archive of obsolete content
heme.jar!/communicator/* /chrome/my_theme.jar!/editor/* /chrome/my_theme.jar!/global/* /chrome/my_theme.jar!/help/* /chrome/my_theme.jar!/messenger/* /chrome/my_theme.jar!/messenger-newsblog/* /chrome/my_theme.jar!/mozapps/* /chrome/my_theme.jar!/navigator/* /chrome.manifest /install.rdf /icon.png /preview.png make sure not to just zip up the my_theme parent directory since that will cause the drag and drop install in the next section to fail without error messages.
...you can also just open the themes window in mozilla and drag and drop your .jar file onto it.
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
repackaging jar now all you need to do is repackage a jar file with the following directory structure, using your favorite archive manager to create a zip archive: /browser/* /communicator/* /global/* /help/* /mozapps/* /contents.rdf /install.rdf /icon.png /preview.png make sure not to just zip up the my_theme parent directory since that will cause the drag and drop install in the next section to fail without error messages.
... you can also just open the themes window in mozilla and drag and drop your .jar file onto it.
Layout FAQ - Archive of obsolete content
why does move movement disappear when i use mouse events to click and drag?
... since the dragging action is involved, you might need to disable it.
Panels - Archive of obsolete content
letting panels be dragged by grabbing the background requires gecko 7.0(firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) starting in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4), you can use the backdrag attribute to create panels that the user can drag by clicking and dragging anywhere on their backgrounds.
... this is a simple, boolean attribute, so you can enable this feature like this: <panel backdrag="true"> ...
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
open the file in seamonkey (for example, by dragging it and dropping it in the navigator window, or by choosing file – open file...
...(for example, drag the file's icon and drop it in seamonkey, or choose file – open file...
Custom toolbar button - Archive of obsolete content
open the file in firefox (for example, by dragging it and dropping it in firefox, or by choosing file – open file...
... drag your new button to where you want it on the toolbar.
Tree Widget Changes - Archive of obsolete content
this will be hidden if the column redordering is disabled using enablecolumndrag="false".
...(-1) nsitreeview.indropon -> nsitreeview.drop_on (0) nsitreeview.indropafter -> nsitreeview.drop_after (1) nsitreeview.progressnormal -> nsitreeview.progress_normal (1) nsitreeview.progressundetermined -> nsitreeview.progress_undetermined (2) nsitreeview.progressnode -> nsitreeview.progress_none (3) as well, the drag and drop methods candropon and candropbeforeafter have been replaced with a single method candrop(idx,orientation) which handles both.
More Event Handlers - Archive of obsolete content
there are also a set of drag related events, which occur when the user holds down a mouse button and drags the mouse around.
... those events are described in drag and drop.
scale - Archive of obsolete content
ArchiveMozillaXULscale
a bar displayed either horizontally or vertically allows the user to select a value by dragging a thumb on the bar.
... increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged).
scrollbar - Archive of obsolete content
the user can adjust the position of the scroll bar by clicking arrows on either end of the scroll bar or by dragging the scroll bar thumb around.
... increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged).
titlebar - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] boxes created with the titlebar element behave just like a normal window titlebar: when the element is clicked and dragged, the window moves with it.
...if the titlebar is in a panel element, dragging it will move the panel.
Visual typescript game engine - Game development
* - dragging is script for dragging dom elements.
... */ private addson: addson = [ { name: "cache", enabled: true, scriptpath: "externals/cacheinit.ts", }, { name: "hackertimer", enabled: true, scriptpath: "externals/hack-timer.js", }, { name: "dragging", enabled: true, scriptpath: "externals/drag.ts", }, ]; /** * @description this is main coordinary types of positions * can be "diametric-fullscreen" or "frame".
Accessibility Features in Firefox
mozilla has support for dragon naturally speaking.
... some users of the professional version are happily playing with dragon and firefox.
Profiling with Xperf
tips in the summary views, the yellow bar can be dragged left and right to change the grouping -- for example, drag it to the left of the module column to have grouping happen only by process (stuff that's to the left), so that you get symbols in order of weight, regardless of what module they're in.
... dragging the columns around will change grouping in various ways; experiment to get the data that you're looking for.
Gecko states
for example, a user could change the size of a window by clicking the border with a mouse and dragging the mouse.
...for example, a user can click on the titlebar for the object and drag the object to a new location.
Places utilities for JavaScript
return type returns a string serialization of the node unwrapnodes() unwraps data from the clipboard or the current drag session.
... type the content type of the data container the container the data was dropped or pasted into index the index within the container the item was dropped or pasted at copy the drag action was copy, so don't move folders or links.
nsIAccessibleStates
for example, a user could change the size of a window by clicking the border with a mouse and dragging the mouse.
...for example, a user can click on the titlebar for the object and drag the object to a new location.
nsIDOMChromeWindow
methods beginwindowmove() on some operating systems, we must allow the window manager to handle window dragging.
... this method tells the window manager to start dragging the window.
nsIDOMFile
this is also used by the datatransfer object to describe files dragged into a web application using drag and drop.
... see also nsidomfilelist nsidomfileexception datatransfer drag and drop ...
nsIDOMFileList
gecko 1.9.2 note starting in gecko 1.9.2, this is also used by the datatransfer object to support dragging and dropping files into web applications.
... see also filelist datatransfer drag and drop ...
XPCOM Interface Reference
ersearchservicensicrlinfonsicrlmanagernsicachensicachedeviceinfonsicacheentrydescriptornsicacheentryinfonsicachelistenernsicachemetadatavisitornsicacheservicensicachesessionnsicachevisitornsicachingchannelnsicancelablensicategorymanagernsichannelnsichanneleventsinknsichannelpolicynsicharsetresolvernsichromeframemessagemanagernsichromeregistrynsiclassinfonsiclipboardnsiclipboardcommandsnsiclipboarddragdrophooklistnsiclipboarddragdrophooksnsiclipboardhelpernsiclipboardownernsicollectionnsicommandcontrollernsicommandlinensicommandlinehandlernsicommandlinerunnernsicomponentmanagernsicomponentregistrarnsicompositionstringsynthesizernsiconsolelistenernsiconsolemessagensiconsoleservicensicontainerboxobjectnsicontentframemessagemanagernsicontentprefnsicontentprefcallback2nsicontentprefobservernsiconte...
...atornsidialogparamblocknsidictionarynsidirindexnsidirindexlistenernsidirindexparsernsidirectoryenumeratornsidirectoryiteratornsidirectoryservicensidirectoryserviceprovidernsidirectoryserviceprovider2nsidiskcachestreaminternalnsidispatchsupportnsidocshellnsidocumentloadernsidownloadnsidownloadhistorynsidownloadmanagernsidownloadmanageruinsidownloadobservernsidownloadprogresslistenernsidownloadernsidragdrophandlernsidragservicensidragsessionnsidroppedlinkhandlernsidroppedlinkitemnsidynamiccontainernsieditornsieditorboxobjectnsieditordocshellnsieditorimesupportnsieditorloggingnsieditormailsupportnsieditorobservernsieditorspellchecknsieffectivetldservicensienumeratornsienvironmentnsierrorservicensieventlistenerinfonsieventlistenerservicensieventsourcensieventtargetnsiexceptionnsiextensionmanagerns...
XPCOM Interface Reference by grouping
nsidomstorageitem nsidomstoragemanager nsidomwindow nsidomwindow2 nsidomwindowinternal nsidomwindowutils nsidynamiccontainer nsieditor event nsidomevent nsidomeventgroup nsidomeventlistener nsidomeventtarget nsidommousescrollevent nsidommoztouchevent nsidomorientationevent nsidomprogressevent nsidomsimplegestureevent nsidragdrophandler nsidragservice nsidragsession html nsiaccessibilityservice nsiaccessiblecoordinatetype nsiaccessibledocument nsiaccessibleeditabletext nsiaccessibleevent nsiaccessiblehyperlink nsiaccessiblehypertext nsiaccessibleimage nsiaccessibleprovider nsiaccessibleretrieval nsiaccessiblerole nsiaccessiblescrolltype nsiaccessible...
...heservice nsicachesession nsicachevisitor nsicachingchannel nsiselectionimageservice chrome nsisearchengine nsisearchsubmission nsiwebbrowserchrome nsiwindowcreator nsiwindowmediator nsiwindowwatcher clipboard nsiclipboard nsiclipboardcommands nsiclipboarddragdrophooklist nsiclipboarddragdrophooks nsiclipboardhelper nsiclipboardowner core action nsitransactionmanager process nsiprocess nsiprocess2 thread nsithread nsithreadeventfilter nsithreadin...
Reposition elements in the page - Firefox Developer Tools
new in firefox 48 starting in firefox 48 you can move absolutely positioned elements by dragging them around the page.
... if an element has its position property set to absolute, relative or fixed and one or more of the top, bottom , left or right properties, the box model view displays a button: if you click that button, two handles appear next to the element: you can use these handles to drag the element around the page.
Flame Chart - Firefox Developer Tools
pan: move the selected portion of the complete profile left and right 1) click and drag the selected portion in the recording overview pane.
... 2) click and drag anywhere in the flame chart.
Responsive Design Mode - Firefox Developer Tools
the mouse wheel changes the size values by 1 pixel at a time you can also change the device's screen size by grabbing the bottom-right corner of the viewport and dragging it to the size you want.
...while touch event simulation is enabled, mouse events are translated into touch events; this includes (starting in firefox 79) translating a mouse-drag event into a touch-drag event.
DataTransfer.mozGetDataAt() - Web APIs
the datatransfer.mozgetdataat() method is used to retrieve an item in the drag event's data transfer object, based on a given format and index.
... syntax nsivariant datatransfer.mozgetdataat([type], index); arguments type a string representing the type of the drag data to retrieve from the drag data object.
GlobalEventHandlers.ondrop - Web APIs
<!doctype html> <html lang=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { co...
...nsole.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div class="source"> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specifi...
HTMLElement - Web APIs
htmlelement.draggable is a boolean indicating if the element can be dragged.
... recommendation added the following properties: dataset, hidden, tabindex, accesskey, accesskeylabel, draggable, dropzone, contenteditable, iscontenteditable, contextmenu, spellcheck, commandtype, commandlabel, commandicon, commandhidden, commanddisabled, commandchecked, style, and all the onxyz properties.
Inputs and input sources - Web APIs
the screen mode indicates that the target ray is determined based on the user interacting with the webxr context by engaging with the screen in some way—most likely by the viewer tapping the screen or dragging the target ray around with their fingers.
...this might be as simple as throwing an object or pulling the trigger of a gun in a game, or as involved as placing an object that they were dragging around the world back down again in a new location.
Movement, orientation, and motion: A WebXR example - Web APIs
since the "mouselook" feature functions only while the right mouse button is held down, and clicking using the right mouse button triggers the context menu, we add a handler for the contextmenu event to the canvas to prevent the context menu fom appearing when the user initially begins their drag of the mouse.
... applying the user inputs the applyviewercontrols() function, which is called by drawframe() before beginning to render anything, takes the offsets in each of the three directions, the yaw offset, and the pitch offset as recorded by the handlekeydown() and handlepointermove() functions in response to the user pressing keys and dragging their mouse with the right mouse button pressed.
Web APIs
WebAPI
aambient light eventsbbackground tasksbattery api beaconbluetooth apibroadcast channel apiccss counter stylescss font loading api cssomcanvas apichannel messaging apiconsole apicredential management apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximit...
...ransferitemlist dedicatedworkerglobalscope delaynode deprecationreportbody devicelightevent devicemotionevent devicemotioneventacceleration devicemotioneventrotationrate deviceorientationevent deviceproximityevent directoryentrysync directoryreadersync displaymediastreamconstraints document documentfragment documentorshadowroot documenttimeline documenttouch documenttype doublerange dragevent dynamicscompressornode e ext_blend_minmax ext_color_buffer_float ext_color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_shader_texture_lod ext_texture_compression_bptc ext_texture_compression_rgtc ext_texture_filter_anisotropic eckeygenparams eckeyimportparams ecdhkeyderiveparams ecdsaparams effecttiming element elementcssinlinestyle elementtraver...
ARIA guides - Accessibility
a few guidelines to follow that ensure better accessibility, like using drag and drop for placement of the widgets.
...non virtual mode in at products using drag & drop notifying users of non-aria screen readers fixing structure with presentation role hiding layout tables managing modal and non modal dialogs using aria with html5 how to test aria aria on mobile devices ...
An overview of accessible web applications and widgets - Accessibility
properties describe characteristics of these widgets, such as if they are draggable, have a required element, or have a popup associated with them.
...examples include (but are certainly not limited to): aria-checked: indicates the state of a checkbox or radio button aria-disabled: indicates that an element is visible, but not editable or otherwise operable aria-grabbed: indicates the 'grabbed' state of an object in a drag-and-drop operation (for a full list of aria states, consult the aria list of states and properties.) developers should use aria states to indicate the state of ui widget elements and use css attribute selectors to alter the visual appearance based on the state changes (rather than using script to change a class name on the element).
::-webkit-scrollbar - CSS: Cascading Style Sheets
::-webkit-scrollbar-thumb — the draggable scrolling handle.
... ::-webkit-resizer — the draggable resizing handle that appears at the bottom corner of some elements.
Border-radius generator - CSS: Cascading Style Sheets
ize = elem.length; for (var i = 0; i < size; i++) new checkbox(elem[i]); } return { init : init, setvalue : setvalue, subscribe : subscribe, unsubscribe : unsubscribe } })(); window.addeventlistener("load", function() { borderradius.init(); }); var borderradius = (function borderradius() { function getelembyid(id) { return document.getelementbyid(id); } /** * shadow dragging */ var previewmousetracking = (function drag() { var active = false; var lastx = 0; var lasty = 0; var subscribers = []; var init = function init(id) { var elem = getelembyid(id); elem.addeventlistener('mousedown', dragstart, false); document.addeventlistener('mouseup', dragend, false); } var dragstart = function dragstart(e) { if (e.button !== 0) return; ...
... active = true; lastx = e.clientx; lasty = e.clienty; document.addeventlistener('mousemove', mousedrag, false); } var dragend = function dragend(e) { if (e.button !== 0) return; if (active === true) { active = false; document.removeeventlistener('mousemove', mousedrag, false); } } var mousedrag = function mousedrag(e) { notify(e.clientx - lastx, e.clienty - lasty); lastx = e.clientx; lasty = e.clienty; } var subscribe = function subscribe(callback) { subscribers.push(callback); } var unsubscribe = function unsubscribe(callback) { var index = subscribers.indexof(callback); subscribers.splice(index, 1); } var notify = function notify(deltax, deltay) { for (var i in subscribers) subscribers[i](deltax, deltay); } ...
Box-shadow generator - CSS: Cascading Style Sheets
all('#colorpicker .input'); var size = elem.length; for (var i = 0; i < size; i++) setinputcomponent(elem[i]); setmousetracking(gradient_area, updatecolor); setmousetracking(hue_area, updatehue); setmousetracking(alpha_area, updatealpha); } return { init : init, setcolor : setcolor, subscribe : subscribe, unsubscribe : unsubscribe } })(); /** * shadow dragging */ var previewmousetracking = (function drag() { var active = false; var lastx = 0; var lasty = 0; var subscribers = []; var init = function init(id) { var elem = getelembyid(id); elem.addeventlistener('mousedown', dragstart, false); document.addeventlistener('mouseup', dragend, false); } var dragstart = function dragstart(e) { if (e.button !== 0) return; ...
... active = true; lastx = e.clientx; lasty = e.clienty; document.addeventlistener('mousemove', mousedrag, false); } var dragend = function dragend(e) { if (e.button !== 0) return; if (active === true) { active = false; document.removeeventlistener('mousemove', mousedrag, false); } } var mousedrag = function mousedrag(e) { notify(e.clientx - lastx, e.clienty - lasty); lastx = e.clientx; lasty = e.clienty; } var subscribe = function subscribe(callback) { subscribers.push(callback); } var unsubscribe = function unsubscribe(callback) { var index = subscribers.indexof(callback); subscribers.splice(index, 1); } var notify = function notify(deltax, deltay) { for (var i in subscribers) subscribers[i](deltax, deltay); } ...
WebKit CSS extensions - CSS: Cascading Style Sheets
l-ordering -webkit-svg-shadow t -webkit-tap-highlight-color -webkit-text-combine -webkit-text-decoration-skip -webkit-text-decorations-in-effect -webkit-text-fill-color -webkit-text-security -webkit-text-stroke-color -webkit-text-stroke-width -webkit-text-stroke -webkit-text-zoom -webkit-transform-origin-x -webkit-transform-origin-y -webkit-transform-origin-z u -webkit-user-drag -webkit-user-modify * a few are on the standards, unprefixed track ** new syntax has been standardized.
... pseudo-classes :-webkit-animating-full-screen-transition :-webkit-any() :-webkit-any-link* :-webkit-autofill :-webkit-autofill-strong-password :-webkit-drag :-webkit-full-page-media :-webkit-full-screen* :-webkit-full-screen-ancestor :-webkit-full-screen-document :-webkit-full-screen-controls-hidden * now standard.
touch-action - CSS: Cascading Style Sheets
note that scrolling "up" (pan-up) means that the user is dragging their finger downward on the screen surface, and likewise pan-left means the user is dragging their finger to the right.
...able rows, row groups, table columns, and column groupsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | none | [ [ pan-x | pan-left | pan-right ] | [ pan-y | pan-up | pan-down ] | pinch-zoom ] | manipulation examples disabling all gestures the most common usage is to disable all gestures on an element (and its non-scrollable descendants) that provides its own dragging and zooming behavior – such as a map or game surface.
Index - Developer guides
WebGuideIndex
42 user input and controls screen orientation, contenteditable, drag and drop, fullscreen, keyboard, mouse, pointer lock, touch, user input modern web user input goes beyond simple mouse and keyboard: think of touchscreens for example.
...relevant apis and events include touch events, pointer lock api, screen orientation api, fullscreen api, drag & drop and more.
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
15 draggable global attributes, html, reference the draggable global attribute is an enumerated attribute that indicates whether the element can be dragged, either with native browser behavior or the html drag and drop api.
... 16 dropzone deprecated, global attributes, html, reference the dropzone global attribute is an enumerated attribute indicating what types of content can be dropped on an element, using the html drag and drop api.
selection - Archive of obsolete content
(discontiguous selections can be created by the user with ctrl+click-and-drag.) events select this event is emitted whenever the user makes a new selection in a page.
widget - Archive of obsolete content
for example, in the future firefox may allow the user to drag widgets from the add-on bar to other toolbars.
Toolbar - Archive of obsolete content
the user has to drag it onto the toolbar.
Windows - Archive of obsolete content
draggable windows to make a window draggable by clicking on the window's contents, you can use the mousedown and mousemove events.
Code snippets - Archive of obsolete content
xml file i/o code used to read, write and process files drag & drop code used to setup and handle drag and drop events dialogs code used to display and process dialog boxes alerts and notifications modal and non-modal ways to notify users preferences code used to read, write, and modify preferences js xpcom code used to define and call xpcom components in javascript running applications code used to run other applications <canvas> related wha...
Extension Packaging - Archive of obsolete content
users can download xpi files from a website, or from a local file, and install by opening it, or dragging it into the extension manager window.
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
for example, there is the mozilla amazon browser, which helps with shopping at amazon, and the presentation method in xul, a tool for writing and displaying presentations to try out the code samples in this chapter, save them as text files with .xul extensions and drag and drop them into the firefox browser window.
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
er/gatekeeper/there.is.only.xul"> <script type="application/javascript"><![cdata[ var ioservice = components.classes['@mozilla.org/network/io-service;1'] .getservice(components.interfaces.nsiioservice); alert(ioservice); ]]></script> </page> calling xpconnect using local files try saving the contents of listing 1 as the file test.xul, somewhere on your desktop, and drag and drop it into firefox to open it.
The Essentials of an Extension - Archive of obsolete content
you can just drag the xpi file to the browser and it will be installed locally.
Signing an XPI - Archive of obsolete content
attempt to install the signed extension either drag and drop or browse to and download the signed xpi.
Signing an extension - Archive of obsolete content
verify drag and drop the xpi file into the content area of firefox.
List of Mozilla-Based Applications - Archive of obsolete content
(product was formerly known as lombardi teamworks) icedragon fast, secure and feature-rich internet browser based on firefox ida e-learning authoring system about 200 users imvu 3d chat client incredimail mail client seems to use xulrunner instantbird im client xulrunner application itsnat java ajax component based web framework java software platform uses m...
Adding the structure - Archive of obsolete content
<statusbar id="status-bar" class="chromeclass-status" ondragdrop="nsdraganddrop.drop(event, contentareadndobserver);"> <statusbarpanel id="component-bar"/> <statusbarpanel id="statusbar-display" label="&statustext.label;" flex="1"/> <statusbarpanel class="statusbarpanel-progress"> <progressmeter class="progressmeter-statusbar" id="statusbar-icon" mode="normal" value="0"/> </statusbarpanel> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" status="none"/> <statusbarpanel class="statusbarpanel-iconic" id="offline-status"/> <statusbarpanel clas...
Making it into a static overlay - Archive of obsolete content
<statusbar id="status-bar" class="chromeclass-status" ondragdrop="nsdraganddrop.drop(event, contentareadndobserver);"> <statusbarpanel id="component-bar"/> <statusbarpanel id="statusbar-display" label="&statustext.label;" flex="1"/> <statusbarpanel class="statusbarpanel-progress"> <progressmeter class="progressmeter-statusbar" id="statusbar-icon" mode="normal" value="0"/> </statusbarpanel> <statusbarpanel class="statusbarpanel-ico...
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
nsuriloader::openuri gets a channel to open, a boolean indicating whether this load is the result of a link click, and an nsisupports "window context" (the docshell triggering the load, actually, but in drag and heavy makeup).
Mozilla Application Framework - Archive of obsolete content
xulmaker a gui builder currently under development that lets you drag-and-drop widgets onto a grid to build your user interface.
Extensions - Archive of obsolete content
then install the extension by either dragging and dropping the extension onto the dialog, or by clicking the “install…” button, navigating to the extension and selecting it for installation.
Venkman Introduction - Archive of obsolete content
the debugger is built on top of an application framework that allows you to drag and drop, resize, and toggle all the available views, and even to create new views or modules for the debugger if you choose—though this latter is an advanced topic and a subject for a future article.
fixed - Archive of obsolete content
if false or not specified, the user can adjust the size of the column, typically by dragging the column header with the mouse.
increment - Archive of obsolete content
« xul reference home increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged).
panel.type - Archive of obsolete content
drag specify this for a panel that's being used as a drag image for a drag and drop operation.
resizeafter - Archive of obsolete content
grow the elements to the right or below the splitter do not change size (unless they are flexible) when the splitter is dragged, but instead the entire container changes size.
state - Archive of obsolete content
dragging the user is current adjusting the position of the splitter, typically by dragging it with the mouse.
Attribute (XUL) - Archive of obsolete content
dater completedefaultindex container containment contentcontextmenu contenttooltip context contextmenu control crop curpos current currentset customindex customizable cycler datasources decimalplaces default defaultbutton defaultset description dir disableautocomplete disableautoselect disableclose disabled disablehistory disablekeynavigation disablesecurity dlgtype dragging editable editortype element empty emptytext deprecated since gecko 2 enablecolumndrag enablehistory equalsize eventnode events expr firstdayofweek firstpage first-tab fixed flags flex focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmatc...
Property - Archive of obsolete content
sources date dateleadingzero datevalue decimalplaces decimalsymbol defaultbutton defaultvalue description dir disableautocomplete disableautocomplete disableautoselect disabled disablekeynavigation dlgtype docshell documentcharsetinfo editable editingcolumn editingrow editingsession editor editortype emptytext deprecated since gecko 2 enablecolumndrag eventnode firstordinalcolumn firstpermanentchild flex focused focuseditem forcecomplete group handlectrlpageupdown handlectrltab hasuservalue height hidden hideseconds highlightnonmatches homepage hour hourleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearching iswaiting itemcount label...
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
they can drag it to the addon bar or to the toolbar.
Toolbar customization events - Archive of obsolete content
customizationchange this event is delivered when the user makes a change to a toolbar while editing the toolbars, either by dragging an item to the toolbar or by dragging an item out of it.
Numeric Controls - Archive of obsolete content
the user may drag the thumb of the scale to adjust the value.
XUL Changes for Firefox 1.5 - Archive of obsolete content
draggable tabs the tabbrowser now allows the user to rearrange tabs by dragging them.
XUL accessibility guidelines - Archive of obsolete content
mouse dependent scripting functionality associated with mouse events such as onmouseover, onmousemove, and ondrag can only be activated with the use of the mouse.
resizer - Archive of obsolete content
if you place a custom resizing button inside the resizer, the user will be able to resize the window by dragging it.
textbox - Archive of obsolete content
increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged).
XUL - Archive of obsolete content
drag and drop how to perform drag and drop operations.
Debugging a XULRunner Application - Archive of obsolete content
inspired by http://article.gmane.org/gmane.comp.mozilla.devel.jsdebugger/859 i extracted venkman.jar, opened venkman\content\venkman\venkman-scripts.xul and changed: @@ -54,11 +54,11 @@ <script src="chrome://global/content/nstransferable.js" /> <script src="chrome://global/content/nsclipboard.js" /> <script src="chrome://global/content/nsdraganddrop.js" /> - <script src="chrome://communicator/content/contentareautils.js" /> - <script src="chrome://communicator/content/contentareadd.js" /> - <script src="chrome://communicator/content/findutils.js" /> - <script src="chrome://browser/content/contentareautils.js" /> + <script src="chrome://global/content/contentareautils.js" /> + <script src="chrome://g...
XUL Explorer - Archive of obsolete content
double-click or drag-and-drop to insert a snippet file > new allows user to pick any “template” snippet, as well as blank.
Archived Mozilla and build documentation - Archive of obsolete content
drag and drop this section describes how to implement objects that can be dragged around and dropped onto other objects.
2006-11-22 - Archive of obsolete content
to join, send a blank email with subscribe in the subject field to: nvda...@freelists.org (click here to view the original post and unmask the e-mail address) michael would like to thank stormdragon for setting this up.
Extentsions FAQ - Archive of obsolete content
just drag them there from the toolbar customisation window, like you would when adding buttons to the toolbars." option #4 install toolbar control <http://webdesigns.ms11.net/chromeditp.html> asking for help with getting an extension to process windows messages.
Sunbird Theme Tutorial - Archive of obsolete content
installing a packaged theme install your packaged theme in the normal way, by dragging the jar (or a link to it) and dropping it in sunbird's themes window.
Building a Theme - Archive of obsolete content
for the purposes of just testing our .xpi file we can just drag it into the add-ons manager via "tools -> add-ons manager", or open it using "file -> open file...".
Using Firebug and jQuery (Screencast) - Archive of obsolete content
drag these bookmarklets found on this page into the bookmarks toolbar of your browser, in order to use them.
:-moz-system-metric(scrollbar-thumb-proportional) - Archive of obsolete content
the :-moz-system-metric(scrollbar-thumb-proportional) css pseudo-class will match an element if the computer's user interface uses proportional scrollbar thumbs; that is, the draggable thumb on the scrollbar resizes to indicate the relative size of the visible area of the document.
:-moz-system-metric() - Archive of obsolete content
:-moz-system-metric(scrollbar-start-forward) css pseudo-class will match an element if the computer's user interface includes a forward arrow button at the start of scrollbars.:-moz-system-metric(scrollbar-thumb-proportional)the :-moz-system-metric(scrollbar-thumb-proportional) css pseudo-class will match an element if the computer's user interface uses proportional scrollbar thumbs; that is, the draggable thumb on the scrollbar resizes to indicate the relative size of the visible area of the document.:-moz-system-metric(touch-enabled)the :-moz-system-metric(touch-enabled) css pseudo-class will match an element if the device on which the content is being rendered offers a supported touch-screen interface.:-moz-system-metric(windows-default-theme)the :-moz-system-metric(windows-default-theme) c...
Displaying notifications (deprecated) - Archive of obsolete content
for example, on android, notifications appear in the bar at the top of the screen, and in the panel that appears when you drag that bar downward.
Index - Game development
this is a multi-player game relying on the tap and drag gestures.
Building up a basic demo with PlayCanvas - Game development
engine vs editor the engine itself can be used as a standard library by including its javascript file directly in your html, so you can start coding right away; in addition the playcanvas toolset comes with an online editor that you can use to drag and drop components onto the scene — a great way to create games and other apps requiring scenes if you're more of a designer than a coder.
Touch Event Horizon - Game development
this is a multi-player game relying on the tap and drag gestures.
Visual-js game engine - Game development
add->new game object (form dialog for define type of new game object ) add->quick code (make your work faster - add usually code blocks) resources - explorer view for images and audios , you can drag or edit also need to execute node build_resources for creating resources object for engine.
Index - MDN Web Docs Glossary: Definitions of Web-related terms
this allows a scrolling experience that gives the effect of paging through content rather than needing to drag content into view.
Snap positions - MDN Web Docs Glossary: Definitions of Web-related terms
this allows a scrolling experience that gives the effect of paging through content rather than needing to drag content into view.
HTML: A good basis for accessibility - Learn web development
these values cause unexpected behavior when copying or dragging links, opening links in a new tab or window, bookmarking, and when javascript is still downloading, errors out, or is disabled.
HTML: A good basis for accessibility - Learn web development
these values cause unexpected behavior when copying or dragging links, opening links in a new tab or window, bookmarking, and when javascript is still downloading, errors out, or is disabled.
Beginner's guide to media queries - Learn web development
from this point, start to drag the responsive design mode view wider until you can see that the line lengths are becoming quite long, and we have space for the navigation to display in a horizontal line.
Positioning - Learn web development
for example, popup information boxes and control menus; rollover panels; ui features that can be dragged and dropped anywhere on the page; and so on...
Responsive design - Learn web development
when viewing the example, drag your browser window in and out to see how this looks at different sizes.
Test your skills: Media Queries and Responsive Design - Learn web development
you can drag your window smaller or use the responsive design view in firefox devtools to view this as if on a phone.
How do you host your website on Google App Engine? - Learn web development
drag and drop the sample-app folder into the left pane of the code editor.
How do you upload your files to a web server? - Learn web development
once you've found the correct remote directory to put your files in, to upload your files to the server you need to drag-and-drop them from the left pane to the right pane.
How do you set up a local testing server? - Learn web development
remote files throughout most of the learning area, we tell you to just open your examples directly in a browser — this can be done by double clicking the html file, dragging and dropping it into the browser window, or choosing file > open...
Advanced form styling - Learn web development
you can use something like the following to remove the default slider track completely and replace it with a custom style (a thin red track, in this case): input[type="range"] { appearance: none; -webkit-appearance: none; background: red; height: 2px; padding: 0; outline: 1px solid transparent; } however, it is very difficult to customize the style of the range control's drag handle — to get full control over range styling you'll need to use a whole bunch of complex css code, including multiple non-standard, browser-specific pseudo-elements.
Other form controls - Learn web development
modern browsers provide a drag handle that you can drag to increase/decrease the size of the text area.
Publishing your website - Learn web development
drag and drop the content of your website folder into your repository.
Index - Learn web development
beginner, express, flask, learn, node, php, python, django, lamp, server-side, servers throughout most of the learning area, we tell you to just open your examples directly in a browser — this can be done by double clicking the html file, dragging and dropping it into the browser window, or choosing file > open...
Introduction to automated testing - Learn web development
you can even do things like copy and paste from the device to your clipboard, scroll up and down by dragging with the mouse, or use appropriate gestures (e.g.
Deploying our app - Learn web development
although netlify offers a drag and drop deployment service, we are intending to trigger a new deployment to netlify each time we push to a github repo.
omni.ja (formerly omni.jar)
users of older versions of windows can use infozip's unzip tool to extract files - make a copy of omni.ja, and drag-and-drop it onto unzip.exe.
Accessibility API cross-reference
glass_pane glass_pane n/a multiple adjacent panes that can be sized relative to each other by dragging a grippy on their border split_pane split_pane n/a an object that can be drawn into and is used to trap events.
Command line options
other options need to be documented -print-xpcom-dir -print-xpcom-dirlist -kill -killall -f -ftimeout -fwait -unsetdefaultmail gtk options -no-deelevate (running windows as administrator with launcher process enabled causes drag and drop errors - how to fix) references chrome: command line test documentation for command-line features (mozilla.org) toolkit/xre/nsapprunner.cpp browser/components/nsbrowsercontenthandler.js suite/browser/nsbrowsercontenthandler.js mail/components/nsmaildefaulthandler.js installer command line options original document information author(s): ben goodger, steffen wilberg, seth...
Debugging on Windows
type/copy/drag the memory address of "int 3" into the memory view to get it to update on that part of the memory.
OS TARGET
winnt linux darwin android sunos freebsd openbsd netbsd os2 beos irix64 aix hp-ux dragonfly skyos riscos nto osf1 ...
Eclipse CDT
now simply drag that tab to position it beside, above, or below the original.
Chrome-only CSS reference
MozillaGeckoChromeCSS
-moz-window-draggingthe -moz-window-dragging css property specifies whether a window is draggable or not.
Application Translation with Mercurial
drag the tab with the localization error showing missing and obsolete strings to the sidebar.
Mozilla Development Strategies
don't drag out reviews by fighting the reviewer in bugzilla (or email) when getting a review, try not to belabor a point that a reviewer is debating you on.
Profiling with the Firefox Profiler
ranges ranges of time can be zoomed in on by clicking and dragging anywhere in the tracing marker or thread areas.
NSS API Guidelines
(frees are allowed.) the arena_destructor_list preprocessor definition, and the code it encloses, are an effort to make the following work together: arenas, letting you allocate stuff and then removing them all at once lazy creation of pure-memory objects from asn.1 blobs, for example use of nsspkixcertificate doesn't drag all the code in for all constituent objects, unless they're actually being used our agressive pointer-tracking facility all these are useful, but they don't combine well.
Functions
this is slow, not only because walking the scope chain is a drag, but also because we'd rather avoid actually creating the scope chain at all, if possible.
SpiderMonkey Internals
jspubtd.h, jsprvtd.h these files exist to group struct and scalar typedefs so they can be used everywhere without dragging in struct definitions from n different files.
Web Replay
note that while this could potentially be a big drag on performance during both replay and recording, many of the hottest atomics (refcounts, gc counters, and so forth) are associated with non-deterministic components and are not recorded.
Gecko events
is supported: no event_movesize_end the movement or resizing of a window has finished is supported: no event_contexthelp_start a window has entered context-sensitive help mode is supported: no event_contexthelp_end a window has exited context-sensitive help mode is supported: no event_dragdrop_start an application is about to enter drag-and-drop mode is supported: yes event_dragdrop_end an application is about to exit drag-and-drop mode is supported: no event_dialog_start a dialog box has been displayed is supported: no event_dialog_end a dialog box has been closed is supported: no event_scrolling_start scrolling has started on a scroll bar is supported: yes event_scrolli...
Gecko Roles
for example, a user clicks and drags a sizing grip in the lower-right corner of a window to resize it role_sound represents a system sound, which is associated with various system events.
Mozilla internal string guide
drag&drop) where it's necessary to call a system api with data encoded in the windows locale-dependent legacy encoding instead of utf-16.
inIDOMUtils
value state 1 :active 2 :focus 4 :hover 8 :-moz-drag-over 16 :target 1<<29 :-moz-focusring methods getbindingurls() returns an array of nsiuri objects representing the current xml binding for the specified element.
nsIAccessibleRole
for example, a user clicks and drags a sizing grip in the lower-right corner of a window to resize it.
nsIDOMEvent
mousedown 0x00000001 mouseup 0x00000002 mouseover 0x00000004 mouseout 0x00000008 mousemove 0x00000010 mousedrag 0x00000020 click 0x00000040 dblclick 0x00000080 keydown 0x00000100 keyup 0x00000200 keypress 0x00000400 dragdrop 0x00000800 focus 0x00001000 blur 0x00002000 select 0x00004000 change 0x00008000 reset 0x00010000 ...
nsIEditor
d setspellcheckuseroverride(in boolean enable); clipboard methods void cut(); boolean cancut(); void copy(); boolean cancopy(); void paste(in long aselectiontype); boolean canpaste(in long aselectiontype); selection methods void selectall(); void beginningofdocument(); void endofdocument(); drag/drop methods boolean candrag(in nsidomevent aevent); void dodrag(in nsidomevent aevent); void insertfromdrop(in nsidomevent aevent); node manipulation methods void setattribute(in nsidomelement aelement, in astring attributestr,in astring attvalue); boolean getattributevalue(in nsidomelement aelement, in astring attributestr, out astring resul...
nsIMessenger
saveattachmenttofolder() is used by the drag and drop code to drop an attachment to a destination folder.
Creating a Custom Column
don't forget to add in a splitter before the column to ensure that the user can easily resize and drag our column around.
Demo Addon
drag the "demo" button into the toolbar.
Working with ArrayBuffers
case 'winmo': case 'winnt': //windows lib = ctypes.open('msvcrt'); break; case 'darwin': // mac lib = ctypes.open('libc.dylib'); break; case 'freebsd': lib = ctypes.open('libc.so.7'); break; case 'openbsd': lib = ctypes.open('libc.so.61.0'); break; case 'android': case 'sunos': case 'netbsd': case 'dragonfly': lib = ctypes.open('libc.so'); break; case 'linux': lib = ctypes.open('libc.so.6'); break; case 'gnu/kfreebsd': lib = ctypes.open('libc.so.0.1'); break; default: //assume unix try { lib = ctypes.open(ctypes.libraryname('c')); } catch (ex) { throw new error('i dont know where to memcpy...
3D view - Firefox Developer Tools
by clicking and dragging the view, you can rotate and re-orient the 3d presentation of the dom hierarchy of your page to see it from different angles, to better examine its structure.
Accessibility Inspector - Firefox Developer Tools
this can include style-related attributes such as margin-left and text-indent, and other useful states for accessibility information, such as draggable and level (e.g., what heading level is it, in the case of headings).
Index - Firefox Developer Tools
t colors guide, inspector, tools in the css pane's rules view, if a rule contains a color value, you'll see a sample of the color next to the value: 66 open the inspector guide, inspector, tools there are two main ways to open the inspector: 67 reposition elements in the page starting in firefox 48 you can move absolutely positioned elements by dragging them around the page.
Measure a portion of the page - Firefox Developer Tools
when you hold the mouse button down and then drag, you'll start to draw a rectangle, with its x, y, and diagonal dimensions displayed.
Network request list - Firefox Developer Tools
you can drag to manually set the size of column.
Edit CSS filters - Firefox Developer Tools
you can edit these lines, remove them individually, or drag the effects to change the order in which they are applied.
Edit Shape Paths in CSS - Firefox Developer Tools
each side of the rectangle can be targeted after clicking on the shapes icon to activate the shape path editor, and dragging each side will update the values for the top, right, bottom, and left offset values.
Toolbox - Firefox Developer Tools
this is what it looks like when it's docked: the window itself is split into two parts: a toolbar along the top, and a main pane underneath: note: since firefox 62, you can drag and drop tabs in the main toolbar of the toolbox to reorder your tools as you wish (bug 1226272).
Document: drop event - Web APIs
bubbles yes cancelable yes default action varies interface dragevent event handler property ondrop examples see the drag event for example code or this jsfiddle demo.
Comparison of Event Targets - Web APIs
event type event.target event.relatedtarget mouseover the eventtarget which the pointing device entered the eventtarget which the pointing device exited mouseout the eventtarget which the pointing device exited the eventtarget which the pointing device entered todo: also needs descriptions for dragenter and dragexit events.
Event.msConvertURL() - Web APIs
syntax var retval = dragevent.msconverturl(file, targettype, targeturl); parameters file [in] type: file the file object to be converted.
Event - Web APIs
WebAPIEvent
animationevent audioprocessingevent beforeinputevent beforeunloadevent blobevent clipboardevent closeevent compositionevent cssfontfaceloadevent customevent devicelightevent devicemotionevent deviceorientationevent deviceproximityevent domtransactionevent dragevent editingbeforeinputevent errorevent fetchevent focusevent gamepadevent hashchangeevent idbversionchangeevent inputevent keyboardevent mediastreamevent messageevent mouseevent mutationevent offlineaudiocompletionevent overconstrainederror pagetransitionevent paymentrequestupdateevent pointerevent popstateevent progressevent relatedevent rtcdatachannelevent rtcidentityerr...
File - Web APIs
WebAPIFile
file objects are generally retrieved from a filelist object returned as a result of a user selecting files using the <input> element, from a drag and drop operation's datatransfer object, or from the mozgetasfile() api on an htmlcanvaselement.
FileList - Web APIs
WebAPIFileList
it's also used for a list of files dropped into web content when using the drag and drop api; see the datatransfer object for details on this usage.
FileReader - Web APIs
file objects may be obtained from a filelist object returned as a result of a user selecting files using the <input> element, from a drag and drop operation's datatransfer object, or from the mozgetasfile() api on an htmlcanvaselement.
FileSystem - Web APIs
7alternate name full support 7alternate name alternate name uses the non-standard name: domfilesystemedge full support ≤18prefixed notes full support ≤18prefixed notes prefixed implemented with the vendor prefix: webkitnotes edge only supports this api in drag-and-drop scenarios using the the datatransferitem.webkitgetasentry() method.
File and Directory Entries API support in Firefox - Web APIs
using drag and drop by calling the datatransferitem.getasentry() method, which lets you get a filesystemfileentry or filesystemdirectoryentry for files dropped on a drop zone.
Introduction to the File and Directory Entries API - Web APIs
for example, you are likely to use one of the following: xmlhttprequest (such as the send() method for file and blob objects) drag and drop api web workers (for the synchronous version of the file and directory entries api) the input element (to programmatically obtain a list of files from the element) the file and directory entries api is case sensitive the filesystem api is case-sensitive, and case-preserving.
GlobalEventHandlers.onmousemove - Web APIs
}; this.show = function(event) { node.textcontent = event.target.dataset.tooltip; node.removeattribute('hidden'); }; this.hide = function() { node.setattribute('hidden', ''); }; })(); const links = document.queryselectorall('a'); links.foreach(link => { link.onmouseover = tooltip.show; link.onmousemove = tooltip.follow; link.onmouseout = tooltip.hide; }); result draggable elements we also have an example available showing the use of the onmousemove event handler with draggable objects — view the example in action.
HTMLInputElement.setSelectionRange() - Web APIs
this lets you indicate, for example, that the selection was set by the user clicking and dragging from the end of the selected text toward the beginning.
HTMLInputElement.webkitEntries - Web APIs
the read-only webkitentries property of the htmlinputelement interface contains an array of file system entries (as objects based on filesystementry) representing files and/or directories selected by the user using an <input> element of type file, but only if that selection was made using drag-and-drop: selecting a file in the dialog will leave the property empty (bug 1326031).
MSManipulationEvent.initMSManipulationEvent() - Web APIs
readonly laststate: number; initmsmanipulationevent(typearg: string, canbubblearg: boolean, cancelablearg: boolean, viewarg: window, detailarg: number, laststate: number, currentstate: number): void; readonly ms_manipulation_state_active: number; readonly ms_manipulation_state_cancelled: number; readonly ms_manipulation_state_committed: number; readonly ms_manipulation_state_dragging: number; readonly ms_manipulation_state_inertia: number; readonly ms_manipulation_state_preselect: number; readonly ms_manipulation_state_selecting: number; readonly ms_manipulation_state_stopped: number; } see also msmanipulationevent microsoft api extensions ...
MSManipulationEvent - Web APIs
readonly laststate: number; initmsmanipulationevent(typearg: string, canbubblearg: boolean, cancelablearg: boolean, viewarg: window, detailarg: number, laststate: number, currentstate: number): void; readonly ms_manipulation_state_active: number; readonly ms_manipulation_state_cancelled: number; readonly ms_manipulation_state_committed: number; readonly ms_manipulation_state_dragging: number; readonly ms_manipulation_state_inertia: number; readonly ms_manipulation_state_preselect: number; readonly ms_manipulation_state_selecting: number; readonly ms_manipulation_state_stopped: number; } see also touchevent msmanipulationstatechanged microsoft api extensions ...
MouseEvent.relatedTarget - Web APIs
he pointing device exited from mouseleave the eventtarget the pointing device exited from the eventtarget the pointing device entered to mouseout the eventtarget the pointing device exited from the eventtarget the pointing device entered to mouseover the eventtarget the pointing device entered to the eventtarget the pointing device exited from dragenter the eventtarget the pointing device entered to the eventtarget the pointing device exited from dragexit the eventtarget the pointing device exited from the eventtarget the pointing device entered to for events with no secondary target, relatedtarget returns null.
MouseEvent - Web APIs
several more specific events are based on mouseevent, including wheelevent and dragevent.
PerformanceEventTiming - Web APIs
auxclick beforeinput click compositionend compositionstart compositionupdate contextmenu dblclick dragend dragenter dragleave dragover dragstart drop input keydown keypress keyup mousedown mouseenter mouseleave mouseout mouseover mouseup pointerover pointerenter pointerdown pointerup pointercancel pointerout pointerleave gotpointercapture lostpointercapture touchstart touchend touchcancel properties performanceeventtiming.processingstart returns the time at which event dispatch started.
Pointer Lock API - Web APIs
mouse capture provides continued delivery of events to a target element while a mouse is being dragged, but it stops when the mouse button is released.
Selection.rangeCount - Web APIs
in gecko browsers, you can select multiple ranges across table cells by holding down ctrl while dragging with the mouse.
WEBGL_compressed_texture_atc - Web APIs
availability: atc compression is typically available on mobile devices with adreno gpus, that are currently only built into qualcomm snapdragon devices.
Example and tutorial: Simple synth keyboard - Web APIs
second, and more importantly, we are using this to handle mouseover for cases where the user is dragging from note to note, and we only want to start playing the note if the mouse is pressed when it enters the element.
Window.captureEvents() - Web APIs
syntax window.captureevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload.
Window.devicePixelRatio - Web APIs
you can use window.matchmedia() to check if the value of devicepixelratio changes (which can happen, for example, if the user drags the window to a display with a different pixel density).
Window.pageYOffset - Web APIs
there might be dragons.
Window.releaseEvents() - Web APIs
syntax window.releaseevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload.
Using the slider role - Accessibility
when the user tabs focus to the slider, it should land on the thumb: the control a mouse user would drag.
Using ARIA: Roles, states, and properties - Accessibility
aria-errormessage aria-expanded aria-haspopup aria-hidden aria-invalid aria-label aria-level aria-modal aria-multiline aria-multiselectable aria-orientation aria-placeholder aria-pressed aria-readonly aria-required aria-selected aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext live region attributes aria-live aria-relevant aria-atomic aria-busy drag & drop attributes aria-dropeffect aria-dragged relationship attributes aria-activedescendant aria-colcount aria-colindex aria-colspan aria-controls aria-describedby aria-details aria-errormessage aria-flowto aria-labelledby aria-owns aria-posinset aria-rowcount aria-rowindex aria-rowspan aria-setsize microsoftedge-specific properties x-ms-aria-flowfrom ...
ARIA: row role - Accessibility
if the interaction provides for the selection state of individual cells, if left to right and top to botton navigation is provided, or if the user interface allows the rearranging of cell order or otherwise changing individual cell order such as through drag and drop, use grid or treegrid instead.
ARIA: table role - Accessibility
if the interaction provides for the selection state of individual cells, if left to right and top to bottom navigation is provided, or if the user interface allows the rearranging of cell order or otherwise changing individual cell order such as through drag and drop, use grid or treegrid instead.
Accessibility documentation index - Accessibility
a few guidelines to follow that ensure better accessibility, like using drag and drop for placement of the widgets.
::selection - CSS: Cascading Style Sheets
the ::selection css pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).
Variable fonts guide - CSS: Cascading Style Sheets
resources w3c css fonts module 4 specification (editor’s draft) w3c github issue queue microsoft open type variations introduction microsoft opentype design-variation axis tag registry wakamai fondue (a site that will tell you what your font can do via a simple drag-and-drop inspection interface) axis praxis (the original variable fonts playground site) v-fonts.com (a catalog of variable fonts and where to get them) font playground (another playground for variable fonts with some very unique approaches to user interface) ...
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
with the flex layout, if we drag our window wider and smaller, the flexbox does a nice job of adjusting the number of items in each row according to the available space.
<color> - CSS: Cascading Style Sheets
-moz-dragtargetzone -moz-eventreerow background color for even-numbered rows in a tree.
overflow - CSS: Cascading Style Sheets
WebCSSoverflow
no scrollbars are provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed.
pointer-events - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all | inherit examples disabling pointer events on all images this example disables pointer events (clicking, dragging, hovering, etc.) on all images.
Demos of open web technologies
dded in svg (or use the local download) summer html image map creator (source code) video video 3d animation "mozilla constantly evolving" video 3d animation "floating dance" streaming anime, movie trailer and interview billy's browser firefox flick virtual barber shop transformers movie trailer a scanner darkly movie trailer (with built in controls) events firing and volume control dragable and sizable videos 3d graphics webgl web audio fireworks ioquake3 (source code) escher puzzle (source code) kai 'opua (source code) virtual reality the polar sea (source code) sechelt fly-through (source code) css css zen garden css floating logo "mozilla" paperfold css blockout rubik's cube pure css slides planetarium (source code) loader with blend modes text rev...
Ajax - Developer guides
WebGuideAJAX
file objects may be obtained from a filelist object returned as a result of a user selecting files using the <input> element, from a drag and drop operation's datatransfer object, or from the mozgetasfile() api on an htmlcanvaselement.
Guide to Web APIs - Developer guides
WebGuideAPI
web apis from a to z aambient light eventsbbackground tasksbattery api beaconbluetooth apibroadcast channel apiccss counter stylescss font loading api cssomcanvas apichannel messaging apiconsole apicredential management apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximit...
HTML5 - Developer guides
WebGuideHTMLHTML5
drag and drop the html5 drag and drop api allows support for dragging and dropping items within and between web sites.
HTML attribute reference - HTML: Hypertext Markup Language
draggable global attribute defines whether the element can be dragged.
<a>: The Anchor element - HTML: Hypertext Markup Language
WebHTMLElementa
these bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when javascript is loading, errors, or is disabled.
<textarea> - HTML: Hypertext Markup Language
WebHTMLElementtextarea
controlling whether a textarea is resizable in most browsers, <textarea>s are resizable — you'll notice the drag handle in the right hand corner, which can be used to alter the size of the element on the page.
itemprop - HTML: Hypertext Markup Language
the only difference is that if the user drags the figcaption out of the document, the item will be included in the drag-and-drop data.
Sec-Fetch-Site - HTTP
directly entering a url in the address bar, opening a bookmark, or draging-and-dropping a file into the browser window.
Object.prototype.hasOwnProperty() - JavaScript
nsole.log(name); // tostring or something else } } using hasownproperty as a property name javascript does not protect the property name hasownproperty; thus, if the possibility exists that an object might have a property with this name, it is necessary to use an external hasownproperty to get correct results: var foo = { hasownproperty: function() { return false; }, bar: 'here be dragons' }; foo.hasownproperty('bar'); // always returns false // use another object's hasownproperty // and call it with 'this' set to foo ({}).hasownproperty.call(foo, 'bar'); // true // it's also possible to use the hasownproperty property // from the object prototype for this purpose object.prototype.hasownproperty.call(foo, 'bar'); // true note that in the last case there are no newly create...
Performance fundamentals - Web Performance
it helps a lot to simplify your look-and-feel and move a proxy element around when you drag and drop.
SVG Event Attributes - SVG: Scalable Vector Graphics
WebSVGAttributeEvents
attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload document element event attributes oncopy, oncut, onpaste global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechang...
textLength - SVG: Scalable Vector Graphics
try dragging the slider around to get a feel for what it does.
SVG Attribute reference - SVG: Scalable Vector Graphics
WebSVGAttribute
values, keytimes, keysplines, from, to, by, autoreverse, accelerate, decelerate animation addition attributes additive, accumulate event attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechang...
Scripting - SVG: Scalable Vector Graphics
WebSVGScripting
preventing default behavior in event code when writing drag and drop code, sometimes you'll find that text on the page gets accidently selected while dragging.