sandbox/yui/bubbledd.html

	bubbledd.html revision 1b298c6f0ef597aa4ab0b8bcb25430b6c9a87749
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>YUI: Event Bubbling</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/reset-fonts-grids/reset-fonts-grids.css">
        <link rel="stylesheet" type="text/css" href="/yui-dev/build/assets/skins/sam/logger.css">
    <link rel="stylesheet" href="http://blog.davglass.com/wp-content/themes/davglass/style.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="http://us.js2.yimg.com/us.js.yimg.com/i/ydn/yuiweb/css/dpsyntax-min-11.css">
    <style type="text/css" media="screen">
        p, h2 {
            margin: 1em;
        }
        .drag {
            height: 50px;
            width: 50px;
            border: 1px solid black;
            background-color: #ccc;
            margin: 5px;
        }
	</style>
</head>
<body class="yui-skin-sam">
<div id="davdoc" class="yui-t7">
    <div id="hd"><h1 id="header"><a href="http://blog.davglass.com/">YUI: Event Bubbling</a></h1></div>
    <div id="bd">
        <div id="drag1" class="drag">One</div>
        <div id="drag2" class="drag">Two</div>
        <div id="drag3" class="drag">Three</div>
    </div>
    <div id="ft">&nbsp;</div>
</div>
<script type="text/javascript" src="/build3x/yui/yui.js"></script>
<script type="text/javascript" src="/build3x/attribute/attribute.js"></script>
<script type="text/javascript" src="/build3x/base/base.js"></script>
<script type="text/javascript" src="/build3x/dd/dd-drag-core-min.js"></script>
<script type="text/javascript">

var Y = new YUI().use('dd-drag');
Y.on('event:ready', function() {

    Y.DD.DDM.on('drag:drag', function(e) {
        if (e.target instanceof Y.DD.Drag) {
            console.info('DDM: e.target is a Drag Instance');
        } else {
            console.warn('DDM: e.target is not a Drag Instance', e.target);
        }
        if (e.currentTarget === Y.DD.DDM) {
            console.info('DDM: e.currentTarget is a DDM Instance');
        } else {
            console.warn('DDM: e.currentTarget is not a DDM Instance', e.currentTarget);
        }
    });


    var dd1 = new Y.DD.Drag({
        node: '#drag1'
    });

    var dd2 = new Y.DD.Drag({
        node: '#drag2'
    });

    var dd3 = new Y.DD.Drag({
        node: '#drag3'
    });


        var _checkTarget = function(e) {
        if (e.target === e.currentTarget) {
            console.log('Drag: Targets the same..');
        } else {
            console.warn('Drag: e.target !== e.currentTarget ', e);
        }
    };

    dd1.on('drag:drag', _checkTarget);
    dd2.on('drag:drag', _checkTarget);
    dd3.on('drag:drag', _checkTarget);

});


</script>
</body>
</html>
<!-- lifeagree.corp.yahoo.com compressed/chunked Fri Jul 18 10:53:38 PDT 2008 -->