JavaScript DHTML/YUI Library/Drag Drop
Содержание
- 1 Basic Drag and Drop
- 2 Basic Drag and Drop
- 3 Reordering a List
- 4 Using Interaction Groups
- 5 Using Interaction Groups
- 6 Using a Proxy Element
- 7 Using Interaction Groups
- 8 Custom Click Validator
- 9 Custom Click Validator
- 10 Staying in a Region
- 11 Dragged Element on Top
- 12 Using the Drag Shim
- 13 Using Handles
- 14 Ghosting and Custom Proxy Resize
Basic Drag and Drop
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Basic Drag and Drop</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script>
<style type="text/css">
.dd-demo {
position:relative; border:4px solid #666; text-align:center; color:#fff; cursor:move; height:60px; width:60px;
} .dd-demo-em {
border:4px solid purple;
}
- dd-demo-1 {
background-color:#6D739A;top:0px; left:105px;
}
- dd-demo-2 {
background-color:#566F4E;top:50px; left:245px;
}
- dd-demo-3 {
background-color:#7E5B60;top:-150px; left:385px;
} </style>
</head>
<body class=" yui-skin-sam">
Basic Drag and Drop
This example demonstrates basic features of the <a href="http://developer.yahoo.ru/yui/dragdrop/">Drag & Drop Utility</a>.
<script type="text/javascript">
(function() {
var dd, dd2, dd3;
YAHOO.util.Event.onDOMReady(function() {
dd = new YAHOO.util.DD("dd-demo-1");
dd2 = new YAHOO.util.DD("dd-demo-2");
dd3 = new YAHOO.util.DD("dd-demo-3");
});
})();
</script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Create a list that can have the order changed with the Drag & Drop Utility.
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Reordering a List</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script>
<style type="text/css">
div.workarea { padding:10px; float:left }
ul.draglist {
position: relative; width: 200px; height:240px; background: #f7f7f7; border: 1px solid gray; list-style: none; margin:0; padding:0;
} ul.draglist li {
margin: 1px; cursor: move; zoom: 1;
} ul.draglist_alt {
position: relative;
width: 200px;
list-style: none;
margin:0;
padding:0;
/*
The bottom padding provides the cushion that makes the empty
list targetable. Alternatively, we could leave the padding
off by default, adding it when we detect that the list is empty.
*/
padding-bottom:20px;
} ul.draglist_alt li {
margin: 1px; cursor: move;
}
li.list1 {
background-color: #D1E6EC; border:1px solid #7EA6B2;
} li.list2 {
background-color: #D8D4E2; border:1px solid #6B4C86;
}
- user_actions { float: right; }
</style>
</head>
<body class=" yui-skin-sam">
Reordering a List
This example demonstrates how to create a list that can have the order changed with the <a href="http://developer.yahoo.ru/yui/dragdrop/">Drag & Drop Utility</a>.
List 1
- list 1, item 1
- list 1, item 2
- list 1, item 3
List 2
- list 2, item 1
- list 2, item 2
- list 2, item 3
<input type="button" id="showButton" value="Show Current Order" /> <input type="button" id="switchButton" value="Remove List Background" />
<script type="text/javascript"> (function() { var Dom = YAHOO.util.Dom; var Event = YAHOO.util.Event; var DDM = YAHOO.util.DragDropMgr; ////////////////////////////////////////////////////////////////////////////// // example app ////////////////////////////////////////////////////////////////////////////// YAHOO.example.DDApp = {
init: function() {
var rows=3,cols=2,i,j;
for (i=1;i<cols+1;i=i+1) {
new YAHOO.util.DDTarget("ul"+i);
}
for (i=1;i<cols+1;i=i+1) {
for (j=1;j<rows+1;j=j+1) {
new YAHOO.example.DDList("li" + i + "_" + j);
}
}
Event.on("showButton", "click", this.showOrder);
Event.on("switchButton", "click", this.switchStyles);
},
showOrder: function() {
var parseList = function(ul, title) {
var items = ul.getElementsByTagName("li");
var out = title + ": ";
for (i=0;i<items.length;i=i+1) {
out += items[i].id + " ";
}
return out;
};
var ul1=Dom.get("ul1"), ul2=Dom.get("ul2");
alert(parseList(ul1, "List 1") + "\n" + parseList(ul2, "List 2"));
},
switchStyles: function() {
Dom.get("ul1").className = "draglist_alt";
Dom.get("ul2").className = "draglist_alt";
}
}; ////////////////////////////////////////////////////////////////////////////// // custom drag and drop implementation ////////////////////////////////////////////////////////////////////////////// YAHOO.example.DDList = function(id, sGroup, config) {
YAHOO.example.DDList.superclass.constructor.call(this, id, sGroup, config); this.logger = this.logger || YAHOO; var el = this.getDragEl(); Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent this.goingUp = false; this.lastY = 0;
}; YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, {
startDrag: function(x, y) {
this.logger.log(this.id + " startDrag");
// make the proxy look like the source element
var dragEl = this.getDragEl();
var clickEl = this.getEl();
Dom.setStyle(clickEl, "visibility", "hidden");
dragEl.innerHTML = clickEl.innerHTML;
Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
Dom.setStyle(dragEl, "border", "2px solid gray");
},
endDrag: function(e) {
var srcEl = this.getEl();
var proxy = this.getDragEl();
// Show the proxy element and animate it to the src element"s location
Dom.setStyle(proxy, "visibility", "");
var a = new YAHOO.util.Motion(
proxy, {
points: {
to: Dom.getXY(srcEl)
}
},
0.2,
YAHOO.util.Easing.easeOut
)
var proxyid = proxy.id;
var thisid = this.id;
// Hide the proxy and show the source element when finished with the animation
a.onComplete.subscribe(function() {
Dom.setStyle(proxyid, "visibility", "hidden");
Dom.setStyle(thisid, "visibility", "");
});
a.animate();
},
onDragDrop: function(e, id) {
// If there is one drop interaction, the li was dropped either on the list,
// or it was dropped on the current location of the source element.
if (DDM.interactionInfo.drop.length === 1) {
// The position of the cursor at the time of the drop (YAHOO.util.Point)
var pt = DDM.interactionInfo.point;
// The region occupied by the source element at the time of the drop
var region = DDM.interactionInfo.sourceRegion;
// Check to see if we are over the source element"s location. We will
// append to the bottom of the list once we are sure it was a drop in
// the negative space (the area of the list without any list items)
if (!region.intersect(pt)) {
var destEl = Dom.get(id);
var destDD = DDM.getDDById(id);
destEl.appendChild(this.getEl());
destDD.isEmpty = false;
DDM.refreshCache();
}
}
},
onDrag: function(e) {
// Keep track of the direction of the drag for use during onDragOver
var y = Event.getPageY(e);
if (y < this.lastY) {
this.goingUp = true;
} else if (y > this.lastY) {
this.goingUp = false;
}
this.lastY = y;
},
onDragOver: function(e, id) {
var srcEl = this.getEl();
var destEl = Dom.get(id);
// We are only concerned with list items, we ignore the dragover
// notifications for the list.
if (destEl.nodeName.toLowerCase() == "li") {
var orig_p = srcEl.parentNode;
var p = destEl.parentNode;
if (this.goingUp) {
p.insertBefore(srcEl, destEl); // insert above
} else {
p.insertBefore(srcEl, destEl.nextSibling); // insert below
}
DDM.refreshCache();
}
}
}); Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true); })();
</script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Drag and drop Interaction Mode: Intersect
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Using Interaction Groups</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script>
<style type="text/css">
.slot { border:2px solid #aaaaaa; background-color:#dddddd; color:#666666; text-align:center; position: absolute; width:60px; height:60px; }
.player { border:2px solid #bbbbbb; color:#eeeeee; text-align:center; position: absolute; width:60px; height:60px; }
.target { border:2px solid #574188; background-color:#cccccc; text-align:center; position: absolute; width:60px; height:60px; }
- t1 { left: 10px; top: 0px; }
- t2 { left: 378px; top: 0px; }
- b1 { left: 84px; top: 50px; }
- b2 { left: 158px; top: 50px; }
- b3 { left: 232px; top: 50px; }
- b4 { left: 306px; top: 50px; }
- pt1 { background-color:#7E695E; left: 84px; top: 150px; }
- pt2 { background-color:#7E695E; left: 84px; top: 230px; }
- pb1 { background-color:#416153; left: 195px; top: 150px; }
- pb2 { background-color:#416153; left: 195px; top: 230px; }
- pboth1 { background-color:#552E37; left: 306px; top: 150px; }
- pboth2 { background-color:#552E37; left: 306px; top: 230px; }
- usercontrols {
top: -36px;
}
- workarea {
position: relative; height: 300px;
} </style>
</head> <body class=" yui-skin-sam">
Using Interaction Groups
Using interaction groups, this example demonstrates how to tie into the <a href="http://developer.yahoo.ru/yui/dragdrop/">Drag & Drop Utility</a>"s interesting moments to provide visual affordances for the current drag operation.
Interaction Mode: <select id="ddmode" >
<option value="0" selected>Point</option> <option value="1">Intersect</option>
</select>
<script type="text/javascript"> (function() { YAHOO.example.DDPlayer = function(id, sGroup, config) {
YAHOO.example.DDPlayer.superclass.constructor.apply(this, arguments); this.initPlayer(id, sGroup, config);
}; YAHOO.extend(YAHOO.example.DDPlayer, YAHOO.util.DDProxy, {
TYPE: "DDPlayer",
initPlayer: function(id, sGroup, config) {
if (!id) {
return;
}
var el = this.getDragEl()
YAHOO.util.Dom.setStyle(el, "borderColor", "transparent");
YAHOO.util.Dom.setStyle(el, "opacity", 0.76);
// specify that this is not currently a drop target
this.isTarget = false;
this.originalStyles = [];
this.type = YAHOO.example.DDPlayer.TYPE;
this.slot = null;
this.startPos = YAHOO.util.Dom.getXY( this.getEl() );
YAHOO.log(id + " startpos: " + this.startPos, "info", "example");
},
startDrag: function(x, y) {
YAHOO.log(this.id + " startDrag", "info", "example");
var Dom = YAHOO.util.Dom;
var dragEl = this.getDragEl();
var clickEl = this.getEl();
dragEl.innerHTML = clickEl.innerHTML;
dragEl.className = clickEl.className;
Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
Dom.setStyle(clickEl, "opacity", 0.1);
var targets = YAHOO.util.DDM.getRelated(this, true);
YAHOO.log(targets.length + " targets", "info", "example");
for (var i=0; i<targets.length; i++) {
var targetEl = this.getTargetDomRef(targets[i]);
if (!this.originalStyles[targetEl.id]) {
this.originalStyles[targetEl.id] = targetEl.className;
}
targetEl.className = "target";
}
},
getTargetDomRef: function(oDD) {
if (oDD.player) {
return oDD.player.getEl();
} else {
return oDD.getEl();
}
},
endDrag: function(e) {
// reset the linked element styles
YAHOO.util.Dom.setStyle(this.getEl(), "opacity", 1);
this.resetTargets();
},
resetTargets: function() {
// reset the target styles
var targets = YAHOO.util.DDM.getRelated(this, true);
for (var i=0; i<targets.length; i++) {
var targetEl = this.getTargetDomRef(targets[i]);
var oldStyle = this.originalStyles[targetEl.id];
if (oldStyle) {
targetEl.className = oldStyle;
}
}
},
onDragDrop: function(e, id) {
// get the drag and drop object that was targeted
var oDD;
if ("string" == typeof id) {
oDD = YAHOO.util.DDM.getDDById(id);
} else {
oDD = YAHOO.util.DDM.getBestMatch(id);
}
var el = this.getEl();
// check if the slot has a player in it already
if (oDD.player) {
// check if the dragged player was already in a slot
if (this.slot) {
// check to see if the player that is already in the
// slot can go to the slot the dragged player is in
// YAHOO.util.DDM.isLegalTarget is a new method
if ( YAHOO.util.DDM.isLegalTarget(oDD.player, this.slot) ) {
YAHOO.log("swapping player positions", "info", "example");
YAHOO.util.DDM.moveToEl(oDD.player.getEl(), el);
this.slot.player = oDD.player;
oDD.player.slot = this.slot;
} else {
YAHOO.log("moving player in slot back to start", "info", "example");
YAHOO.util.Dom.setXY(oDD.player.getEl(), oDD.player.startPos);
this.slot.player = null;
oDD.player.slot = null
}
} else {
// the player in the slot will be moved to the dragged
// players start position
oDD.player.slot = null;
YAHOO.util.DDM.moveToEl(oDD.player.getEl(), el);
}
} else {
// Move the player into the emply slot
// I may be moving off a slot so I need to clear the player ref
if (this.slot) {
this.slot.player = null;
}
}
YAHOO.util.DDM.moveToEl(el, oDD.getEl());
this.resetTargets();
this.slot = oDD;
this.slot.player = this;
},
swap: function(el1, el2) {
var Dom = YAHOO.util.Dom;
var pos1 = Dom.getXY(el1);
var pos2 = Dom.getXY(el2);
Dom.setXY(el1, pos2);
Dom.setXY(el2, pos1);
},
onDragOver: function(e, id) {
},
onDrag: function(e, id) {
}
}); var slots = [], players = [],
Event = YAHOO.util.Event, DDM = YAHOO.util.DDM;
Event.onDOMReady(function() {
// slots
slots[0] = new YAHOO.util.DDTarget("t1", "topslots");
slots[1] = new YAHOO.util.DDTarget("t2", "topslots");
slots[2] = new YAHOO.util.DDTarget("b1", "bottomslots");
slots[3] = new YAHOO.util.DDTarget("b2", "bottomslots");
slots[4] = new YAHOO.util.DDTarget("b3", "bottomslots");
slots[5] = new YAHOO.util.DDTarget("b4", "bottomslots");
// players
players[0] = new YAHOO.example.DDPlayer("pt1", "topslots");
players[1] = new YAHOO.example.DDPlayer("pt2", "topslots");
players[2] = new YAHOO.example.DDPlayer("pb1", "bottomslots");
players[3] = new YAHOO.example.DDPlayer("pb2", "bottomslots");
players[4] = new YAHOO.example.DDPlayer("pboth1", "topslots");
players[4].addToGroup("bottomslots");
players[5] = new YAHOO.example.DDPlayer("pboth2", "topslots");
players[5].addToGroup("bottomslots");
DDM.mode = document.getElementById("ddmode").selectedIndex;
Event.on("ddmode", "change", function(e) {
YAHOO.util.DDM.mode = this.selectedIndex;
});
}); })(); </script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Drag and drop Interaction Mode: Point
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Using Interaction Groups</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script>
<style type="text/css">
.slot { border:2px solid #aaaaaa; background-color:#dddddd; color:#666666; text-align:center; position: absolute; width:60px; height:60px; }
.player { border:2px solid #bbbbbb; color:#eeeeee; text-align:center; position: absolute; width:60px; height:60px; }
.target { border:2px solid #574188; background-color:#cccccc; text-align:center; position: absolute; width:60px; height:60px; }
- t1 { left: 10px; top: 0px; }
- t2 { left: 378px; top: 0px; }
- b1 { left: 84px; top: 50px; }
- b2 { left: 158px; top: 50px; }
- b3 { left: 232px; top: 50px; }
- b4 { left: 306px; top: 50px; }
- pt1 { background-color:#7E695E; left: 84px; top: 150px; }
- pt2 { background-color:#7E695E; left: 84px; top: 230px; }
- pb1 { background-color:#416153; left: 195px; top: 150px; }
- pb2 { background-color:#416153; left: 195px; top: 230px; }
- pboth1 { background-color:#552E37; left: 306px; top: 150px; }
- pboth2 { background-color:#552E37; left: 306px; top: 230px; }
- usercontrols {
top: -36px;
}
- workarea {
position: relative; height: 300px;
} </style>
</head> <body class=" yui-skin-sam">
Using Interaction Groups
Using interaction groups, this example demonstrates how to tie into the <a href="http://developer.yahoo.ru/yui/dragdrop/">Drag & Drop Utility</a>"s interesting moments to provide visual affordances for the current drag operation.
Interaction Mode: <select id="ddmode" >
<option value="0" selected>Point</option> <option value="1">Intersect</option>
</select>
<script type="text/javascript"> (function() { YAHOO.example.DDPlayer = function(id, sGroup, config) {
YAHOO.example.DDPlayer.superclass.constructor.apply(this, arguments); this.initPlayer(id, sGroup, config);
}; YAHOO.extend(YAHOO.example.DDPlayer, YAHOO.util.DDProxy, {
TYPE: "DDPlayer",
initPlayer: function(id, sGroup, config) {
if (!id) {
return;
}
var el = this.getDragEl()
YAHOO.util.Dom.setStyle(el, "borderColor", "transparent");
YAHOO.util.Dom.setStyle(el, "opacity", 0.76);
// specify that this is not currently a drop target
this.isTarget = false;
this.originalStyles = [];
this.type = YAHOO.example.DDPlayer.TYPE;
this.slot = null;
this.startPos = YAHOO.util.Dom.getXY( this.getEl() );
YAHOO.log(id + " startpos: " + this.startPos, "info", "example");
},
startDrag: function(x, y) {
YAHOO.log(this.id + " startDrag", "info", "example");
var Dom = YAHOO.util.Dom;
var dragEl = this.getDragEl();
var clickEl = this.getEl();
dragEl.innerHTML = clickEl.innerHTML;
dragEl.className = clickEl.className;
Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
Dom.setStyle(clickEl, "opacity", 0.1);
var targets = YAHOO.util.DDM.getRelated(this, true);
YAHOO.log(targets.length + " targets", "info", "example");
for (var i=0; i<targets.length; i++) {
var targetEl = this.getTargetDomRef(targets[i]);
if (!this.originalStyles[targetEl.id]) {
this.originalStyles[targetEl.id] = targetEl.className;
}
targetEl.className = "target";
}
},
getTargetDomRef: function(oDD) {
if (oDD.player) {
return oDD.player.getEl();
} else {
return oDD.getEl();
}
},
endDrag: function(e) {
// reset the linked element styles
YAHOO.util.Dom.setStyle(this.getEl(), "opacity", 1);
this.resetTargets();
},
resetTargets: function() {
// reset the target styles
var targets = YAHOO.util.DDM.getRelated(this, true);
for (var i=0; i<targets.length; i++) {
var targetEl = this.getTargetDomRef(targets[i]);
var oldStyle = this.originalStyles[targetEl.id];
if (oldStyle) {
targetEl.className = oldStyle;
}
}
},
onDragDrop: function(e, id) {
// get the drag and drop object that was targeted
var oDD;
if ("string" == typeof id) {
oDD = YAHOO.util.DDM.getDDById(id);
} else {
oDD = YAHOO.util.DDM.getBestMatch(id);
}
var el = this.getEl();
// check if the slot has a player in it already
if (oDD.player) {
// check if the dragged player was already in a slot
if (this.slot) {
// check to see if the player that is already in the
// slot can go to the slot the dragged player is in
// YAHOO.util.DDM.isLegalTarget is a new method
if ( YAHOO.util.DDM.isLegalTarget(oDD.player, this.slot) ) {
YAHOO.log("swapping player positions", "info", "example");
YAHOO.util.DDM.moveToEl(oDD.player.getEl(), el);
this.slot.player = oDD.player;
oDD.player.slot = this.slot;
} else {
YAHOO.log("moving player in slot back to start", "info", "example");
YAHOO.util.Dom.setXY(oDD.player.getEl(), oDD.player.startPos);
this.slot.player = null;
oDD.player.slot = null
}
} else {
// the player in the slot will be moved to the dragged
// players start position
oDD.player.slot = null;
YAHOO.util.DDM.moveToEl(oDD.player.getEl(), el);
}
} else {
// Move the player into the emply slot
// I may be moving off a slot so I need to clear the player ref
if (this.slot) {
this.slot.player = null;
}
}
YAHOO.util.DDM.moveToEl(el, oDD.getEl());
this.resetTargets();
this.slot = oDD;
this.slot.player = this;
},
swap: function(el1, el2) {
var Dom = YAHOO.util.Dom;
var pos1 = Dom.getXY(el1);
var pos2 = Dom.getXY(el2);
Dom.setXY(el1, pos2);
Dom.setXY(el2, pos1);
},
onDragOver: function(e, id) {
},
onDrag: function(e, id) {
}
}); var slots = [], players = [],
Event = YAHOO.util.Event, DDM = YAHOO.util.DDM;
Event.onDOMReady(function() {
// slots
slots[0] = new YAHOO.util.DDTarget("t1", "topslots");
slots[1] = new YAHOO.util.DDTarget("t2", "topslots");
slots[2] = new YAHOO.util.DDTarget("b1", "bottomslots");
slots[3] = new YAHOO.util.DDTarget("b2", "bottomslots");
slots[4] = new YAHOO.util.DDTarget("b3", "bottomslots");
slots[5] = new YAHOO.util.DDTarget("b4", "bottomslots");
// players
players[0] = new YAHOO.example.DDPlayer("pt1", "topslots");
players[1] = new YAHOO.example.DDPlayer("pt2", "topslots");
players[2] = new YAHOO.example.DDPlayer("pb1", "bottomslots");
players[3] = new YAHOO.example.DDPlayer("pb2", "bottomslots");
players[4] = new YAHOO.example.DDPlayer("pboth1", "topslots");
players[4].addToGroup("bottomslots");
players[5] = new YAHOO.example.DDPlayer("pboth2", "topslots");
players[5].addToGroup("bottomslots");
DDM.mode = document.getElementById("ddmode").selectedIndex;
Event.on("ddmode", "change", function(e) {
YAHOO.util.DDM.mode = this.selectedIndex;
});
}); })(); </script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Drag and drop using a proxy element.
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Using a Proxy Element</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script>
<style type="text/css">
.dd-demo {
position:relative; border:4px solid #666; text-align:center; color:#fff; cursor:move; height:60px; width:60px;
} .dd-demo-em {
border:4px solid purple;
}
- dd-demo-1 {
background-color:#6D739A;top:0px; left:0px;
}
- dd-demo-2 {
background-color:#566F4E;top:50px; left:100px; height: 80px; width: 80px;
}
- dd-demo-3 {
background-color:#7E5B60;top:-150px; left:200px; height: 100px; width: 100px;
}
- dd-demo-3-proxy {
position: absolute; visibility: hidden; color: #fff; text-align:center; background-color:#000; height:100px; width: 100px;
} </style>
</head>
<body class=" yui-skin-sam">
Using a Proxy Element
This example demonstrates drag and drop using a proxy element.
<script type="text/javascript">
(function() {
var dd, dd2, dd3;
YAHOO.util.Event.onDOMReady(function() {
// The first two instances will share a proxy
// element, created automatically by the utility.
// This element will be resized at drag time so
// that it matches the size of the source element.
// It is configured by default to have a 2 pixel
// grey border.
dd = new YAHOO.util.DDProxy("dd-demo-1");
dd2 = new YAHOO.util.DDProxy("dd-demo-2");
// The third instance has a dedicated custom proxy
dd3 = new YAHOO.util.DDProxy("dd-demo-3", "default", {
// Define a custom proxy element. It will be
// created if not already on the page.
dragElId: "dd-demo-3-proxy",
// When a drag starts, the proxy is normally
// resized. Turn this off so we can keep a
// fixed sized proxy.
resizeFrame: false
});
});
})();
</script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Drag and drop: Using Interaction Groups
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Using Interaction Groups</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script>
<style type="text/css">
.slot { border:2px solid #aaaaaa; background-color:#dddddd; color:#666666; text-align:center; position: absolute; width:60px; height:60px; }
.player { border:2px solid #bbbbbb; color:#eeeeee; text-align:center; position: absolute; width:60px; height:60px; }
.target { border:2px solid #574188; background-color:#cccccc; text-align:center; position: absolute; width:60px; height:60px; }
- t1 { left: 10px; top: 0px; }
- t2 { left: 378px; top: 0px; }
- b1 { left: 84px; top: 50px; }
- b2 { left: 158px; top: 50px; }
- b3 { left: 232px; top: 50px; }
- b4 { left: 306px; top: 50px; }
- pt1 { background-color:#7E695E; left: 84px; top: 150px; }
- pt2 { background-color:#7E695E; left: 84px; top: 230px; }
- pb1 { background-color:#416153; left: 195px; top: 150px; }
- pb2 { background-color:#416153; left: 195px; top: 230px; }
- pboth1 { background-color:#552E37; left: 306px; top: 150px; }
- pboth2 { background-color:#552E37; left: 306px; top: 230px; }
- usercontrols {
top: -36px;
}
- workarea {
position: relative; height: 300px;
} </style>
</head> <body class=" yui-skin-sam">
Using Interaction Groups
Using interaction groups, this example demonstrates how to tie into the <a href="http://developer.yahoo.ru/yui/dragdrop/">Drag & Drop Utility</a>"s interesting moments to provide visual affordances for the current drag operation.
Interaction Mode: <select id="ddmode" >
<option value="0" selected>Point</option> <option value="1">Intersect</option>
</select>
<script type="text/javascript"> (function() { YAHOO.example.DDPlayer = function(id, sGroup, config) {
YAHOO.example.DDPlayer.superclass.constructor.apply(this, arguments); this.initPlayer(id, sGroup, config);
}; YAHOO.extend(YAHOO.example.DDPlayer, YAHOO.util.DDProxy, {
TYPE: "DDPlayer",
initPlayer: function(id, sGroup, config) {
if (!id) {
return;
}
var el = this.getDragEl()
YAHOO.util.Dom.setStyle(el, "borderColor", "transparent");
YAHOO.util.Dom.setStyle(el, "opacity", 0.76);
// specify that this is not currently a drop target
this.isTarget = false;
this.originalStyles = [];
this.type = YAHOO.example.DDPlayer.TYPE;
this.slot = null;
this.startPos = YAHOO.util.Dom.getXY( this.getEl() );
YAHOO.log(id + " startpos: " + this.startPos, "info", "example");
},
startDrag: function(x, y) {
YAHOO.log(this.id + " startDrag", "info", "example");
var Dom = YAHOO.util.Dom;
var dragEl = this.getDragEl();
var clickEl = this.getEl();
dragEl.innerHTML = clickEl.innerHTML;
dragEl.className = clickEl.className;
Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
Dom.setStyle(clickEl, "opacity", 0.1);
var targets = YAHOO.util.DDM.getRelated(this, true);
YAHOO.log(targets.length + " targets", "info", "example");
for (var i=0; i<targets.length; i++) {
var targetEl = this.getTargetDomRef(targets[i]);
if (!this.originalStyles[targetEl.id]) {
this.originalStyles[targetEl.id] = targetEl.className;
}
targetEl.className = "target";
}
},
getTargetDomRef: function(oDD) {
if (oDD.player) {
return oDD.player.getEl();
} else {
return oDD.getEl();
}
},
endDrag: function(e) {
// reset the linked element styles
YAHOO.util.Dom.setStyle(this.getEl(), "opacity", 1);
this.resetTargets();
},
resetTargets: function() {
// reset the target styles
var targets = YAHOO.util.DDM.getRelated(this, true);
for (var i=0; i<targets.length; i++) {
var targetEl = this.getTargetDomRef(targets[i]);
var oldStyle = this.originalStyles[targetEl.id];
if (oldStyle) {
targetEl.className = oldStyle;
}
}
},
onDragDrop: function(e, id) {
// get the drag and drop object that was targeted
var oDD;
if ("string" == typeof id) {
oDD = YAHOO.util.DDM.getDDById(id);
} else {
oDD = YAHOO.util.DDM.getBestMatch(id);
}
var el = this.getEl();
// check if the slot has a player in it already
if (oDD.player) {
// check if the dragged player was already in a slot
if (this.slot) {
// check to see if the player that is already in the
// slot can go to the slot the dragged player is in
// YAHOO.util.DDM.isLegalTarget is a new method
if ( YAHOO.util.DDM.isLegalTarget(oDD.player, this.slot) ) {
YAHOO.log("swapping player positions", "info", "example");
YAHOO.util.DDM.moveToEl(oDD.player.getEl(), el);
this.slot.player = oDD.player;
oDD.player.slot = this.slot;
} else {
YAHOO.log("moving player in slot back to start", "info", "example");
YAHOO.util.Dom.setXY(oDD.player.getEl(), oDD.player.startPos);
this.slot.player = null;
oDD.player.slot = null
}
} else {
// the player in the slot will be moved to the dragged
// players start position
oDD.player.slot = null;
YAHOO.util.DDM.moveToEl(oDD.player.getEl(), el);
}
} else {
// Move the player into the emply slot
// I may be moving off a slot so I need to clear the player ref
if (this.slot) {
this.slot.player = null;
}
}
YAHOO.util.DDM.moveToEl(el, oDD.getEl());
this.resetTargets();
this.slot = oDD;
this.slot.player = this;
},
swap: function(el1, el2) {
var Dom = YAHOO.util.Dom;
var pos1 = Dom.getXY(el1);
var pos2 = Dom.getXY(el2);
Dom.setXY(el1, pos2);
Dom.setXY(el2, pos1);
},
onDragOver: function(e, id) {
},
onDrag: function(e, id) {
}
}); var slots = [], players = [],
Event = YAHOO.util.Event, DDM = YAHOO.util.DDM;
Event.onDOMReady(function() {
// slots
slots[0] = new YAHOO.util.DDTarget("t1", "topslots");
slots[1] = new YAHOO.util.DDTarget("t2", "topslots");
slots[2] = new YAHOO.util.DDTarget("b1", "bottomslots");
slots[3] = new YAHOO.util.DDTarget("b2", "bottomslots");
slots[4] = new YAHOO.util.DDTarget("b3", "bottomslots");
slots[5] = new YAHOO.util.DDTarget("b4", "bottomslots");
// players
players[0] = new YAHOO.example.DDPlayer("pt1", "topslots");
players[1] = new YAHOO.example.DDPlayer("pt2", "topslots");
players[2] = new YAHOO.example.DDPlayer("pb1", "bottomslots");
players[3] = new YAHOO.example.DDPlayer("pb2", "bottomslots");
players[4] = new YAHOO.example.DDPlayer("pboth1", "topslots");
players[4].addToGroup("bottomslots");
players[5] = new YAHOO.example.DDPlayer("pboth2", "topslots");
players[5].addToGroup("bottomslots");
DDM.mode = document.getElementById("ddmode").selectedIndex;
Event.on("ddmode", "change", function(e) {
YAHOO.util.DDM.mode = this.selectedIndex;
});
}); })(); </script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Implement a circular drag object
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Custom Click Validator</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script>
<style type="text/css">
.dd-demo {
position:relative; border:4px solid #666; text-align:center; color:#fff; cursor:move; height:100px; width:100px;
}
- dd-demo-1 {
background:url(yui_2.7.0b-assets/dragdrop-assets/circle.gif) 0 0 no-repeat; border:0px solid black; z-index:10; cursor:default;
}
- dd-demo-2 {
background:#A0B9A6; top:10px; left:180px; border:0px solid black; cursor:default;
} </style>
</head>
<body class=" yui-skin-sam">
Custom Click Validator
This example demonstrates how to implement a custom click validator to make a circular drag and drop implementation. Because all DOM elements that have dimensions are rectangular, the way to implement a circular drag object is to perform calculations on mousedown to determine whether the mouse was targeting a valid portion of the element (eg, a portion within the circle).
The same method could be used to create any non-rectangular draggable object.
DD
<script type="text/javascript">
(function() {
var dd, dd2, clickRadius = 46, startPos,
Event=YAHOO.util.Event, Dom=YAHOO.util.Dom;
YAHOO.util.Event.onDOMReady(function() {
var el = Dom.get("dd-demo-1");
startPos = Dom.getXY(el);
dd = new YAHOO.util.DD(el);
// our custom click validator let"s us prevent clicks outside
// of the circle (but within the element) from initiating a
// drag.
dd.clickValidator = function(e) {
// get the screen rectangle for the element
var el = this.getEl();
var region = Dom.getRegion(el);
// get the radius of the largest circle that can fit inside
// var w = region.right - region.left;
// var h = region.bottom - region.top;
// var r = Math.round(Math.min(h, w) / 2);
//-or- just use a well-known radius
var r = clickRadius;
// get the location of the click
var x1 = Event.getPageX(e), y1 = Event.getPageY(e);
// get the center of the circle
var x2 = Math.round((region.right+region.left)/2);
var y2 = Math.round((region.top+region.bottom)/2);
// I don"t want text selection even if the click does not
// initiate a drag
Event.preventDefault(e);
// check to see if the click is in the circle
return ( ((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2)) <= r*r );
};
dd.onDragDrop = function(e, id) {
// center it in the square
Dom.setXY(this.getEl(), Dom.getXY(id));
}
dd.onInvalidDrop = function(e) {
// return to the start position
// Dom.setXY(this.getEl(), startPos);
// Animating the move is more intesting
new YAHOO.util.Motion(
this.id, {
points: {
to: startPos
}
},
0.3,
YAHOO.util.Easing.easeOut
).animate();
}
dd2 = new YAHOO.util.DDTarget("dd-demo-2");
});
})();
</script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Implement a custom click validator to make a circular drag and drop implementation.
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Custom Click Validator</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script>
<style type="text/css">
.dd-demo {
position:relative; border:4px solid #666; text-align:center; color:#fff; cursor:move; height:100px; width:100px;
}
- dd-demo-1 {
background:url(yui_2.7.0b-assets/dragdrop-assets/circle.gif) 0 0 no-repeat; border:0px solid black; z-index:10; cursor:default;
}
- dd-demo-2 {
background:#A0B9A6; top:10px; left:180px; border:0px solid black; cursor:default;
} </style>
</head>
<body class=" yui-skin-sam">
Custom Click Validator
This example demonstrates how to implement a custom click validator to make a circular drag and drop implementation. Because all DOM elements that have dimensions are rectangular, the way to implement a circular drag object is to perform calculations on mousedown to determine whether the mouse was targeting a valid portion of the element (eg, a portion within the circle).
The same method could be used to create any non-rectangular draggable object.
DD
<script type="text/javascript">
(function() {
var dd, dd2, clickRadius = 46, startPos,
Event=YAHOO.util.Event, Dom=YAHOO.util.Dom;
YAHOO.util.Event.onDOMReady(function() {
var el = Dom.get("dd-demo-1");
startPos = Dom.getXY(el);
dd = new YAHOO.util.DD(el);
// our custom click validator let"s us prevent clicks outside
// of the circle (but within the element) from initiating a
// drag.
dd.clickValidator = function(e) {
// get the screen rectangle for the element
var el = this.getEl();
var region = Dom.getRegion(el);
// get the radius of the largest circle that can fit inside
// var w = region.right - region.left;
// var h = region.bottom - region.top;
// var r = Math.round(Math.min(h, w) / 2);
//-or- just use a well-known radius
var r = clickRadius;
// get the location of the click
var x1 = Event.getPageX(e), y1 = Event.getPageY(e);
// get the center of the circle
var x2 = Math.round((region.right+region.left)/2);
var y2 = Math.round((region.top+region.bottom)/2);
// I don"t want text selection even if the click does not
// initiate a drag
Event.preventDefault(e);
// check to see if the click is in the circle
return ( ((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2)) <= r*r );
};
dd.onDragDrop = function(e, id) {
// center it in the square
Dom.setXY(this.getEl(), Dom.getXY(id));
}
dd.onInvalidDrop = function(e) {
// return to the start position
// Dom.setXY(this.getEl(), startPos);
// Animating the move is more intesting
new YAHOO.util.Motion(
this.id, {
points: {
to: startPos
}
},
0.3,
YAHOO.util.Easing.easeOut
).animate();
}
dd2 = new YAHOO.util.DDTarget("dd-demo-2");
});
})();
</script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Keep draggable elements from being dragged out of a region.
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Staying in a Region</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script>
<style type="text/css">
.dd-demo {
position: relative; text-align: center; color: #fff; cursor: move; height: 60px; width: 60px; padding: 0; margin: 0;
} .dd-demo div {
border: 1px solid black; height: 58px; width: 58px;
}
- dd-demo-canvas1 {
padding: 55px; background-color: #7E5B60; border: 1px solid black;
}
- dd-demo-canvas2 {
padding: 25px; background-color: #566F4E; border: 1px solid black;
}
- dd-demo-canvas3 {
padding: 15px; background-color: #6D739A; border: 1px solid black;
}
- dd-demo-1 {
background-color:#6D739A;top:5px; left:5px;
}
- dd-demo-2 {
background-color:#566F4E;top:50px; left:100px;
}
- dd-demo-3 {
background-color:#7E5B60;top:-100px; left:200px;
} </style>
</head>
<body class=" yui-skin-sam">
Staying in a Region
This example shows how to keep draggable elements from being dragged out of a region.
The three elements below will not be able to be dragged beyond the borders of their own colored elements.
<script type="text/javascript"> (function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event,
dd1, dd2, dd3;
YAHOO.example.DDRegion = function(id, sGroup, config) {
this.cont = config.cont;
YAHOO.example.DDRegion.superclass.constructor.apply(this, arguments);
};
YAHOO.extend(YAHOO.example.DDRegion, YAHOO.util.DD, {
cont: null,
init: function() {
//Call the parent"s init method
YAHOO.example.DDRegion.superclass.init.apply(this, arguments);
this.initConstraints();
Event.on(window, "resize", function() {
this.initConstraints();
}, this, true);
},
initConstraints: function() {
//Get the top, right, bottom and left positions
var region = Dom.getRegion(this.cont);
//Get the element we are working on
var el = this.getEl();
//Get the xy position of it
var xy = Dom.getXY(el);
//Get the width and height
var width = parseInt(Dom.getStyle(el, "width"), 10);
var height = parseInt(Dom.getStyle(el, "height"), 10);
//Set left to x minus left
var left = xy[0] - region.left;
//Set right to right minus x minus width
var right = region.right - xy[0] - width;
//Set top to y minus top
var top = xy[1] - region.top;
//Set bottom to bottom minus y minus height
var bottom = region.bottom - xy[1] - height;
//Set the constraints based on the above calculations
this.setXConstraint(left, right);
this.setYConstraint(top, bottom);
}
});
Event.onDOMReady(function() {
dd1 = new YAHOO.example.DDRegion("dd-demo-1", "", { cont: "dd-demo-canvas3" });
dd2 = new YAHOO.example.DDRegion("dd-demo-2", "", { cont: "dd-demo-canvas2" }) ;
dd3 = new YAHOO.example.DDRegion("dd-demo-3", "", { cont: "dd-demo-canvas1" });
});
})(); </script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Keeping the dragged element on top of the others by changing its z-index property during the drag.
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Dragged Element on Top</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script>
<style type="text/css">
.dd-demo {
position:relative; border:4px solid #666; text-align:center; color:#fff; cursor:move; height:60px; width:60px;
} .dd-demo-em {
border:4px solid purple;
}
- dd-demo-1 {
background-color:#6D739A;top:0px; left:0px;
}
- dd-demo-2 {
background-color:#566F4E;top:50px; left:100px;
}
- dd-demo-3 {
background-color:#7E5B60;top:-150px; left:200px;
} </style>
</head>
<body class=" yui-skin-sam">
Dragged Element on Top
This example builds on the basic drag and drop, keeping the dragged element
on top of the others by changing its z-index property during the drag.
<script type="text/javascript"> // Our custom drag and drop implementation, extending YAHOO.util.DD YAHOO.example.DDOnTop = function(id, sGroup, config) {
YAHOO.example.DDOnTop.superclass.constructor.apply(this, arguments);
}; YAHOO.extend(YAHOO.example.DDOnTop, YAHOO.util.DD, {
origZ: 0,
startDrag: function(x, y) {
YAHOO.log(this.id + " startDrag", "info", "example");
var style = this.getEl().style;
// store the original z-index
this.origZ = style.zIndex;
// The z-index needs to be set very high so the element will indeed be on top
style.zIndex = 999;
},
endDrag: function(e) {
YAHOO.log(this.id + " endDrag", "info", "example");
// restore the original z-index
this.getEl().style.zIndex = this.origZ;
}
}); </script> <script type="text/javascript"> (function() {
var dd, dd2, dd3;
YAHOO.util.Event.onDOMReady(function() {
dd = new YAHOO.example.DDOnTop("dd-demo-1");
dd2 = new YAHOO.example.DDOnTop("dd-demo-2");
dd3 = new YAHOO.example.DDOnTop("dd-demo-3");
});
})(); </script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
This example shows the use of the drag shim when dragging nodes over other troublesome nodes.
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Using the Drag Shim</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script>
</head> <body class=" yui-skin-sam">
Using the Drag Shim
This example shows the use of the drag shim when dragging nodes over other troublesome nodes.
<style>
#demo {
height: 100px;
width: 100px;
border: 1px solid black;
cursor: move;
float: right;
}
#ifrm {
width: 400px;
height: 300px;
}
</style>
Try dragging the proxy element over the iframe below, in most browsers this will not happen. Now click the Shim off button and drag again. Now you can drag over the iframe.
You can see the shim by clicking the Debug Off button.
<button id="shim" value="off">Shim Off</button> <button id="debugShim" value="off" disabled>Debug Off</button>
<iframe id="ifrm" src="yui_2.7.0b-assets/dragdrop-assets/blank.htm"></iframe> <script type="text/javascript"> (function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
Event.onDOMReady(function() {
//Create the DDProxy Instance
var dd = new YAHOO.util.DDProxy("demo", {
//Don"t resize the frame
resizeFrame: false
});
//On startDrag let"s change the proxy"s size and color
dd.on("startDragEvent", function() {
Dom.setStyle(this.getDragEl(), "height", "20px");
Dom.setStyle(this.getDragEl(), "width", "100px");
Dom.setStyle(this.getDragEl(), "backgroundColor", "blue");
Dom.setStyle(this.getDragEl(), "color", "white");
this.getDragEl().innerHTML = "Custom Proxy";
});
Event.on("shim", "click", function(e) {
var tar = Event.getTarget(e);
var value = tar.value;
if (value == "off" || value == "Shim Off") {
//Turn on the shim
dd.useShim = true;
tar.value = "on";
tar.innerHTML = "Shim On";
Dom.get("debugShim").disabled = false;
} else {
//Turn off the shim
dd.useShim = false;
tar.value = "off";
tar.innerHTML = "Shim Off";
Dom.get("debugShim").disabled = true;
}
});
Event.on("debugShim", "click", function(e) {
var tar = Event.getTarget(e);
var value = tar.value;
if (value == "off" || value == "Debug Off") {
//Turn on debugging the shim
YAHOO.util.DDM._debugShim = true;
tar.value = "on";
tar.innerHTML = "Debug On";
} else {
//Turn off debugging the shim
YAHOO.util.DDM._debugShim = false;
tar.value = "off";
tar.innerHTML = "Debug Off";
}
});
});
})(); </script>
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Use drag handles to control the specific places within an element from which a drag can be initiated.
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Using Handles</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script>
<style type="text/css">
- playground {
position: relative; height: 200px;
} .dd-demo {
position:absolute; border:4px solid #666; text-align:center; color:#fff; height:60px; width:60px;
} .dd-demo .dd-handle {
background: #003366; cursor:move;
} .dd-demo .dd-multi-handle-1 {
background: #336699; float: left; cursor:move;
} .dd-demo .dd-multi-handle-2 {
background: #336699; float: right; cursor:move;
} .dd-outer-handle {
position:relative; background: red; cursor:move; height: 20px; width: 3em; text-align:center; top:0px; left:200px;
}
.dd-demo-em {
border:4px solid purple;
}
- dd-demo-1 {
background-color:#6D739A;top:0px; left:0px;
}
- dd-demo-2 {
background-color:#566F4E;top:50px; left:100px;
}
- dd-demo-3 {
background-color:#7E5B60; top:20px; left:200px;
} </style>
</head>
<body class=" yui-skin-sam">
Using Handles
This example demonstrates how to use drag handles to control the specific places within an element from which a drag can be initiated.
<script type="text/javascript"> (function() {
var dd, dd2, dd3;
YAHOO.util.Event.onDOMReady(function() {
dd = new YAHOO.util.DD("dd-demo-1");
// Configure one or more child element as a drag handle
dd.setHandleElId("dd-handle-1a");
dd.setHandleElId("dd-handle-1b");
dd2 = new YAHOO.util.DD("dd-demo-2");
dd2.setHandleElId("dd-handle-2");
dd3 = new YAHOO.util.DD("dd-demo-3");
dd3.setHandleElId("dd-handle-3a");
// A handle that is not child of the source element
dd3.setOuterHandleElId("dd-handle-3b");
});
})(); </script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Use ghosting and manipulate the proxy element.
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Ghosting and Custom Proxy Resize</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/resize/assets/skins/sam/resize.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/resize/resize-min.js"></script>
</head> <body class="yui-skin-sam">
Ghosting and Custom Proxy Resize
This example shows how to use ghosting and manipulate the proxy element.
<style>
#yui_img {
position: absolute;
top: 20px;
left: 20px;
}
#example-canvas {
height: 200px;
}
div.wrap {
position: relative;
}
</style>
<script> (function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var resize = new YAHOO.util.Resize("yui_img", {
handles: "all",
knobHandles: true,
height: "166px",
width: "250px",
proxy: true,
ghost: true,
status: true,
draggable: true,
animate: true,
animateDuration: .75,
animateEasing: YAHOO.util.Easing.backBoth
});
resize.on("startResize", function() {
this.getProxyEl().innerHTML = "<img src="" + this.get("element").src + "" style="height: 100%; width: 100%;">";
Dom.setStyle(this.getProxyEl().firstChild, "opacity", ".25");
}, resize, true);
})(); </script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
