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.
...a value of true or false is mandatory, and shorthand like <img draggable> is forbidden.
...And 4 more matches

Drag Operations - Web APIs
the draggable attribute in a web page, there are certain cases where a default drag behavior is used.
... in html, apart from the default behavior for images, links, and selections, no other elements are draggable by default.
... to make other html elements draggable, three things must be done: set the draggable="true" on the element that you wish to make draggable.
...And 7 more matches

HTML Drag and Drop API - Web APIs
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.
...And 4 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...
...lorsample(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); this.updatebgcolor(); }; colorsample.prototype.updatehue = function updatehue(color, degree, steps) { this.color.copy(color); var hue = (steps * deg...
...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

-moz-window-dragging
the -moz-window-dragging css property specifies whether a window is draggable or not.
... values drag the window is draggable.
... no-drag the window is not draggable formal syntax drag | no-drag example toolbarpaletteitem { -moz-window-dragging: no-drag; } specifications this property is not part of any specification.

DataTransfer.clearData() - Web APIs
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.
...<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'; ...

Document: drag event - Web APIs
html <div class="dropzone"> <div id="draggable" draggable="true" ondragstart="event.datatransfer.setdata('text/plain',null)"> this div is draggable </div> </div> <div class="dropzone"></div> <div class="dropzone"></div> <div class="dropzone"></div> css #draggable { width: 200px; height: 20px; text-align: center; background: white; } .dropzone { width: 200px; height: 20px; background: blueviolet; margin-bottom: 10px; ...
... padding: 10px; } javascript var dragged; /* events fired on the draggable target */ document.addeventlistener("drag", function(event) { }, false); document.addeventlistener("dragstart", function(event) { // store a ref.
...ocument.addeventlistener("dragend", function(event) { // reset the transparency event.target.style.opacity = ""; }, false); /* events fired on the drop targets */ document.addeventlistener("dragover", function(event) { // prevent default to allow drop event.preventdefault(); }, false); document.addeventlistener("dragenter", function(event) { // highlight potential drop target when the draggable element enters it if (event.target.classname == "dropzone") { event.target.style.background = "purple"; } }, false); document.addeventlistener("dragleave", function(event) { // reset background of potential drop target when the draggable element leaves it if (event.target.classname == "dropzone") { event.target.style.background = ""; } }, false); document.addeventlistener("d...

ARIA Test Cases - Accessibility
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.
... 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.

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.

::-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.

User input and controls - Developer guides
<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.

Global attributes - HTML: Hypertext Markup Language
draggable an enumerated attribute indicating whether the element can be dragged, using the drag and drop api.
...from html5, contextmenu, draggable, dropzone, and spellcheck have been added.

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.

Index - Archive of obsolete content
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.