JavaScript DHTML/YUI Library/Drag Drop — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Текущая версия на 07:29, 26 мая 2010
Содержание
- 1 Basic Drag and Drop
- 2 Create a list that can have the order changed with the Drag & Drop Utility.
- 3 Drag and drop Interaction Mode: Intersect
- 4 Drag and drop Interaction Mode: Point
- 5 Drag and drop using a proxy element.
- 6 Drag and drop: Using Interaction Groups
- 7 Implement a circular drag object
- 8 Implement a custom click validator to make a circular drag and drop implementation.
- 9 Keep draggable elements from being dragged out of a region.
- 10 Keeping the dragged element on top of the others by changing its z-index property during the drag.
- 11 This example shows the use of the drag shim when dragging nodes over other troublesome nodes.
- 12 Use drag handles to control the specific places within an element from which a drag can be initiated.
- 13 Use ghosting and manipulate the proxy element.
Basic Drag and Drop
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--begin custom header content for this example-->
<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>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Basic Drag and Drop</h1>
<div class="exampleIntro">
<p>This example demonstrates basic features of the <a href="http://developer.yahoo.ru/yui/dragdrop/">Drag & Drop Utility</a>.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<div id="dd-demo-1" class="dd-demo"></div>
<div id="dd-demo-2" class="dd-demo"></div>
<div id="dd-demo-3" class="dd-demo"></div>
<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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:13 PST 2009 -->
<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.
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--begin custom header content for this example-->
<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>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Reordering a List</h1>
<div class="exampleIntro">
<p>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>.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<div class="workarea">
<h3>List 1</h3>
<ul id="ul1" class="draglist">
<li class="list1" id="li1_1">list 1, item 1</li>
<li class="list1" id="li1_2">list 1, item 2</li>
<li class="list1" id="li1_3">list 1, item 3</li>
</ul>
</div>
<div class="workarea">
<h3>List 2</h3>
<ul id="ul2" class="draglist">
<li class="list2" id="li2_1">list 2, item 1</li>
<li class="list2" id="li2_2">list 2, item 2</li>
<li class="list2" id="li2_3">list 2, item 3</li>
</ul>
</div>
<div id="user_actions">
<input type="button" id="showButton" value="Show Current Order" />
<input type="button" id="switchButton" value="Remove List Background" />
</div>
<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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:13 PST 2009 -->
<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
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--begin custom header content for this example-->
<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>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Using Interaction Groups</h1>
<div class="exampleIntro">
<p>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.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<div id="usercontrols">
Interaction Mode:
<select id="ddmode" >
<option value="0" selected>Point</option>
<option value="1">Intersect</option>
</select>
</div>
<div id="workarea">
<div class="slot" id="t1" >1</div>
<div class="slot" id="t2" >2</div>
<div class="slot" id="b1" >3</div>
<div class="slot" id="b2" >4</div>
<div class="slot" id="b3" >5</div>
<div class="slot" id="b4" >6</div>
<div class="player" id="pt1" >1</div>
<div class="player" id="pt2" >2</div>
<div class="player" id="pb1" >3</div>
<div class="player" id="pb2" >4</div>
<div class="player" id="pboth1" >5</div>
<div class="player" id="pboth2" >6</div>
</div>
<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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:13 PST 2009 -->
<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
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--begin custom header content for this example-->
<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>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Using Interaction Groups</h1>
<div class="exampleIntro">
<p>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.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<div id="usercontrols">
Interaction Mode:
<select id="ddmode" >
<option value="0" selected>Point</option>
<option value="1">Intersect</option>
</select>
</div>
<div id="workarea">
<div class="slot" id="t1" >1</div>
<div class="slot" id="t2" >2</div>
<div class="slot" id="b1" >3</div>
<div class="slot" id="b2" >4</div>
<div class="slot" id="b3" >5</div>
<div class="slot" id="b4" >6</div>
<div class="player" id="pt1" >1</div>
<div class="player" id="pt2" >2</div>
<div class="player" id="pb1" >3</div>
<div class="player" id="pb2" >4</div>
<div class="player" id="pboth1" >5</div>
<div class="player" id="pboth2" >6</div>
</div>
<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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:13 PST 2009 -->
<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.
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--begin custom header content for this example-->
<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>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Using a Proxy Element</h1>
<div class="exampleIntro">
<p>This example demonstrates drag and drop using a proxy element.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<div id="dd-demo-1" class="dd-demo"></div>
<div id="dd-demo-2" class="dd-demo"></div>
<div id="dd-demo-3" class="dd-demo"></div>
<div id="dd-demo-3-proxy">Custom</div>
<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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:13 PST 2009 -->
<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
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--begin custom header content for this example-->
<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>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Using Interaction Groups</h1>
<div class="exampleIntro">
<p>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.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<div id="usercontrols">
Interaction Mode:
<select id="ddmode" >
<option value="0" selected>Point</option>
<option value="1">Intersect</option>
</select>
</div>
<div id="workarea">
<div class="slot" id="t1" >1</div>
<div class="slot" id="t2" >2</div>
<div class="slot" id="b1" >3</div>
<div class="slot" id="b2" >4</div>
<div class="slot" id="b3" >5</div>
<div class="slot" id="b4" >6</div>
<div class="player" id="pt1" >1</div>
<div class="player" id="pt2" >2</div>
<div class="player" id="pb1" >3</div>
<div class="player" id="pb2" >4</div>
<div class="player" id="pboth1" >5</div>
<div class="player" id="pboth2" >6</div>
</div>
<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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:13 PST 2009 -->
<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
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--begin custom header content for this example-->
<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>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Custom Click Validator</h1>
<div class="exampleIntro">
<p>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).</p>
<p>The same method could be used to create any non-rectangular draggable object.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<div id="dd-demo-1" class="dd-demo"><br />DD</div>
<div id="dd-demo-2" class="dd-demo">DDTarget</div>
<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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:13 PST 2009 -->
<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.
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--begin custom header content for this example-->
<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>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Custom Click Validator</h1>
<div class="exampleIntro">
<p>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).</p>
<p>The same method could be used to create any non-rectangular draggable object.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<div id="dd-demo-1" class="dd-demo"><br />DD</div>
<div id="dd-demo-2" class="dd-demo">DDTarget</div>
<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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:13 PST 2009 -->
<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.
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--begin custom header content for this example-->
<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>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Staying in a Region</h1>
<div class="exampleIntro">
<p>This example shows how to keep draggable elements from being dragged out of a region.</p>
<p>The three elements below will not be able to be dragged beyond the borders of their own colored elements.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<div id="dd-demo-canvas1">
<div id="dd-demo-canvas2">
<div id="dd-demo-canvas3">
<div id="dd-demo-1" class="dd-demo"><div>1</div></div>
<div id="dd-demo-2" class="dd-demo"><div>2</div></div>
<div id="dd-demo-3" class="dd-demo"><div>3</div></div>
</div>
</div>
</div>
<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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:13 PST 2009 -->
<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.
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--begin custom header content for this example-->
<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>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Dragged Element on Top</h1>
<div class="exampleIntro">
<p>This example builds on the basic drag and drop, keeping the dragged element
on top of the others by changing its <code>z-index</code> property during the drag.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<div id="dd-demo-1" class="dd-demo"></div>
<div id="dd-demo-2" class="dd-demo"></div>
<div id="dd-demo-3" class="dd-demo"></div>
<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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:13 PST 2009 -->
<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.
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--there is no custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Using the Drag Shim</h1>
<div class="exampleIntro">
<p>This example shows the use of the drag shim when dragging nodes over other troublesome nodes.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<style>
#demo {
height: 100px;
width: 100px;
border: 1px solid black;
cursor: move;
float: right;
}
#ifrm {
width: 400px;
height: 300px;
}
</style>
<p>Try dragging the proxy element over the iframe below, in most browsers this will not happen. Now click the <code>Shim off</code> button and drag again. Now you can drag over the iframe.</p>
<p>You can see the shim by clicking the <code>Debug Off</code> button.</p>
<p><button id="shim" value="off">Shim Off</button> <button id="debugShim" value="off" disabled>Debug Off</button></p>
<div id="demo">Drag Me</div>
<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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:13 PST 2009 -->
<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.
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--begin custom header content for this example-->
<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>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Using Handles</h1>
<div class="exampleIntro">
<p>This example demonstrates how to use drag handles to control the specific places within an element from which a drag can be initiated.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<div id="playground">
<div id="dd-demo-1" class="dd-demo">
<div id="dd-handle-1a" class="dd-multi-handle-1">H1</div>
<div id="dd-handle-1b" class="dd-multi-handle-2">H2</div>
</div>
<div id="dd-demo-2" class="dd-demo">
<div id="dd-handle-2" class="dd-handle">H</div>
</div>
<div id="dd-handle-3b" class="dd-outer-handle">Outer</div>
<div id="dd-demo-3" class="dd-demo"></div>
</div>
<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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:13 PST 2009 -->
<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.
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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>
<!--there is no custom header content for this example-->
</head>
<body class="yui-skin-sam">
<h1>Ghosting and Custom Proxy Resize</h1>
<div class="exampleIntro">
<p>This example shows how to use ghosting and manipulate the proxy element.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<style>
#yui_img {
position: absolute;
top: 20px;
left: 20px;
}
#example-canvas {
height: 200px;
}
div.wrap {
position: relative;
}
</style>
<div class="wrap"><img src="yui_2.7.0b-assets/resize-assets/yui.jpg" id="yui_img" height="166" width="250"></div>
<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>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:18 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
