draggable - HTML: Hypertext Markup Language
if this attribute is not set, its default value is auto, which means drag behavior is the default browser behavior: only text selections, images, and links can be dragged. for other elements, the event ondragstart must be set for drag and drop to work, as shown in this comprehensive example. ...
...aggable 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. this attribute is enumerated and not boolean. a value of true or false is mandatory, and shorthand like <img draggable> is forbidden. the correct usage is <img draggable="false">. if this attribute is not set, its default value is auto, which means drag behavior is the default browser behavior: only text selections, images, and links can be dragged. for other elements, the event ondragstart must be set for drag and drop to work, as shown in this comprehensive example. specifications specification ...
...s attribute is not set, its default value is auto, which means drag behavior is the default browser behavior: only text selections, images, and links can be dragged. for other elements, the event ondragstart must be set for drag and drop to work, as shown in this comprehensive example. specifications specification status comment html living standardthe definition of 'draggable' in that specification. living standard no change from latest snapshot, html 5.1 html 5.2the definition of 'draggable' in that specification. recommendation no change html 5.1the definition of 'draggable' in that specification. recommendation snapshot of html living standard, initial definition ...

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. for web sites, extensions, and xul applications, you can customize which elements can become draggable, the type of feedback the draggable elements produce, and the droppable elements. this overview of html drag and drop includes a description of the interfaces, basic steps to add drag-and-drop support to an application, and an interoperability summary of the interfaces. drag events html drag-and-drop uses the dom event model and drag events inherited from mouse ...
...ggable elements produce, and the droppable elements. this overview of html drag and drop includes a description of the interfaces, basic steps to add drag-and-drop support to an application, and an interoperability summary of the interfaces. drag events html drag-and-drop uses the dom event model and drag events inherited from mouse events. a typical drag operation begins when a user selects a draggable element, drags the element to a droppable element, and then releases the dragged element. during drag operations, several event types are fired, and some events might fire many times, such as the drag and dragover events. each drag event type has an associated global event handler: event on event handler fires when… drag ondrag …a dragged item (element or ...
...nce functions to help with dragging multiple items or non-string data (such as files). for more information, see dragging and dropping multiple items. additionally, see the datatransfer reference page for all of the gecko-specific properties and gecko-specific methods. the basics this section is a summary of the basic steps to add drag-and-drop functionality to an application. ...
...And 7 more matches

Drag Operations - Web APIs
these include text selections, images, and links. when an image or link is dragged, the url of the image or link is set as the drag data, and a drag begins. ...
...fect, select an area of a webpage, and then click and hold the mouse and drag the selection. an os-specific rendering of the selection will appear and follow the mouse pointer as the drag occurs. however, this behavior is only the default drag behavior, if no listeners adjust the data to be dragged. ...
...nd hold the mouse and drag the selection. an os-specific rendering of the selection will appear and follow the mouse pointer as the drag occurs. however, this behavior is only the default drag behavior, if no listeners adjust the data to be dragged. in html, apart from the default behavior for images, links, and selections, no other elements are draggable by default. ...
...And 4 more matches

Document: drag event - Web APIs
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. ...
...undred 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. ...
...bbles 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

Color picker tool - CSS: Cascading Style Sheets
}; 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) retur...
... 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 hslcolor = uicolorpicker.hslcolor; /** * colorpalette */ var colorpalette = (function colorpalette() { var samples = []; var color_palette; var complementary; var hidenode = function(node) { node.setattribute('data-hidden', 'true'); }; var colorsample = function co...
... var color_palette; var complementary; var hidenode = function(node) { node.setattribute('data-hidden', 'true'); }; var colorsample = function colorsample(id) { var node = document.createelement('div'); node.classname = 'sample'; this.uid = samples.length; this.node = node; this.color = new color(); node.setattribute('sample-id', this.uid); node.setattribute('draggable', 'true'); node.addeventlistener('dragstart', this.dragstart.bind(this)); node.addeventlistener('click', this.pickcolor.bind(this)); samples.push(this); }; colorsample.prototype.updatebgcolor = function updatebgcolor() { this.node.style.backgroundcolor = this.color.getcolor(); }; colorsample.prototype.updatecolor = function updatecolor(color) { this.color.copy(color); ...
...And 3 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> <div id=...
...-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 auto; ...
...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('mouse...
...And 2 more matches

DataTransfer.clearData() - Web APIs
ata store is writeable. syntax datatransfer.cleardata([format]); parameters format optional a string which specifies the type of data to remove. if this parameter is an empty string or is not provided, the data for all types is removed. example this example shows the use of the datatransfer object's getdata(), setdata() and cleardata() methods. html <span class="tweaked" id="source" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element. </span> <span class="tweaked" id="target">drop zone</span> <div>status: <span id="status">drag to start</span></div> <div>data is: <span id="data">uninitialized</span></div> css span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; } #source { color: blue; bor...
...<div>status: <span id="status">drag to start</span></div> <div>data is: <span id="data">uninitialized</span></div> css span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript window.addeventlistener('domcontentloaded', function () { // select html elements var draggable = document.getelementbyid('source'); var dropable = document.getelementbyid('target'); var status = document.getelementbyid('status'); var data = document.getelementbyid('data'); var dropped = false; // register event handlers draggable.addeventlistener('dragstart', dragstarthandler); draggable.addeventlistener('dragend', dragendhandler); dropable.addeventlistener('dragover', dra...
...tatransfer.getdata('text/plain'); } function dragendhandler (event) { if (!dropped) { status.innerhtml = 'drag canceled'; } data.innerhtml = event.datatransfer.getdata('text/plain') || 'empty'; // change border to signify drag is no longer in process event.currenttarget.style.border = '1px solid black'; if (dropped) { // remove all event listeners draggable.removeeventlistener('dragstart', dragstarthandler); draggable.removeeventlistener('dragend', dragendhandler); dropable.removeeventlistener('dragover', dragoverhandler); dropable.removeeventlistener('dragleave', dragleavehandler); dropable.removeeventlistener('drop', drophandler); } } function dragoverhandler (event) { status.innerhtml = 'drop available'; ...

ARIA Test Cases - Accessibility
(al) i'm not sure if there is a way for the screen reader to know when something has been marked for drag & drop. ...
...(al) i'm not sure if there is a way for the screen reader to know when something has been marked for drag & drop. ...
...op operation caused a menu to open, focus should be tracked in that menu, and the user should be able to complete further interaction via the keyboard as usual. optional but desired: at should provide simple method to navigate only among the current drop targets. markup used: aria-grab aria-dropeffect notes: (mz) there is no equivalent place in any of the known operating systems where draggable items are denoted and targets being indicated as such. all drag and drop operations screen readers traditionally perform within the operating system are hit and miss games that are performed on pixel locations. the above is a suggested series of behaviors i as an end user would want to experience when dealing with aria drag and drop, but it has no basis to go on, unlike common controls, for examp...

GlobalEventHandlers.onmousemove - Web APIs
specifications specification status comment html living standardthe definition of 'onmousemove' in that specification. living standard ...
... specifications specification status comment html living standardthe definition of 'onmousemove' in that specification. living standard ...

HTMLElement - Web APIs
enting the contextual menu associated with the element. it may be null. htmlorforeignelement.dataset read only returns a domstringmap with which script can read and write the element's custom data attributes (data-*) . htmlelement.dir is a domstring, reflecting the dir global attribute, representing the directionality of the element. possible values are "ltr", "rtl", and "auto". htmlelement.draggable is a boolean indicating if the element can be dragged. htmlelement.dropzone read only returns a domsettabletokenlist reflecting the dropzone global attribute and describing the behavior of the element regarding a drop operation. htmlelement.hidden is a boolean indicating if the element is hidden or not. htmlelement.inert is a boolean indicating whether the user agent must act as though th...
...scope, itemtype, itemid, itemref, itemprop, properties, and itemvalue. added the following method: forcespellcheck(). moved the onxyz attributes to the globaleventhandlers interface and added an inheritance from it. html5the definition of 'htmlelement' in that specification. 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. moved the id and classname properties to the element interface. document object model (dom) level 2 html specificationthe definition of 'htmlelement' in that specification. obsolete n...

::-webkit-scrollbar - CSS: Cascading Style Sheets
browsers (e.g., chrome, edge, opera, safari, all browsers on ios, and others). css scrollbar selectors you can use the following pseudo elements to customize various parts of the scrollbar for webkit browsers: ::-webkit-scrollbar — the entire scrollbar. ::-webkit-scrollbar-button — the buttons on the scrollbar (arrows pointing upwards and downwards). ...
...nd downwards). ::-webkit-scrollbar-thumb — the draggable scrolling handle. ::-webkit-scrollbar-track — the track (progress bar) of the scrollbar. ::-webkit-scrollbar-track-piece — the part of the track (progress bar) not covered by the handle. ::-webkit-scrollbar-corner — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet. ::-webkit-resizer — the draggable resizing handle that appears at the bottom corner of some elements. syntax syntax not found in db! examples .visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar { display: block; width: 10em; overflow: auto; height: 2em; } .invisible-scrollbar::-webkit-scrollbar { display: none; } /* demonstrate a "mostly customized" scrollbar * (won't be visible otherwise if w...

User input and controls - Developer guides
find more out about adding fullscreen functionality your application, read our documentation about using fullscreen mode. drag & drop drag & drop allows your application’s users to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there. here is an example that allows a section of content to be dragged. ...
... click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there. here is an example that allows a section of content to be dragged. <div draggable="true" ondragstart="event.datatransfer.setdata('text/plain', 'this text may be dragged')">
 this text <strong>may</strong> be dragged. 
</div> in which we: set the draggable attribute to true on the element that you wish to make draggable add a listener for the dragstart event and set the drag data within this listener note: you can find more information in the mdn drag & drop documentation. contenteditable in open web apps any dom element can be made directly editable using the contenteditable attribute. <div contenteditable="true">
 this text can be e...

Global attributes - HTML: Hypertext Markup Language
om the left to the right (like english); rtl, which means right to left and is to be used for languages that are written from the right to the left (like arabic); auto, which lets the user agent decide. it uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then it applies that directionality to the whole element. 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. dropzone an enumerated attribute indicating what types of content can be dropped on an element, using the drag and drop api. it can have...
...tparts global attributes. html 5.2the definition of 'global attributes' in that specification. recommendation snapshot of html living standard. from html 5.1, itemid, itemprop, itemref, itemscope, and itemtype have been added. html 5.1the definition of 'global attributes' in that specification. recommendation snapshot of html living standard. from html5, contextmenu, draggable, dropzone, and spellcheck have been added. html5the definition of 'global attributes' in that specification. recommendation snapshot of html living standard. from html 4.01 specification, the concept of global attributes is introduced and the dir, lang, style, id, class, tabindex, accesskey, and title are now true global attributes. xml:lang which was initially part of xhtml, i...

Windows - Archive of obsolete content
= components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); var newwindow = wm.getmostrecentwindow("navigator:browser"); var b = newwindow.gbrowser; the code generate a typeerror from firefox console. in particular the components.classes is undefined and the components object is deprecated. it will soon be removed. draggable windows to make a window draggable by clicking on the window's contents, you can use the mousedown and mousemove events. the following code does not care which element is clicked on, simply responding to all mousedown events equally. you could improve this code by checking the event.target element and only setting the startpos if the element matches some criteria. example var startpos = null...

Index - Archive of obsolete content
terface includes a forward arrow button at the start of scrollbars. 2143 :-moz-system-metric(scrollbar-thumb-proportional) css, needscontent, needsexample, non-standard, pseudo-class, reference, selector 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. 2144 :-moz-system-metric(touch-enabled) css, needscontent, needsexample, non-standard, pseudo-class, reference, selector 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-scr...