dojo--Dragging-3

drag me!

i am dragged only by my inner handle
we first register the outer box as a drag source, then change it's handle to the inner box

drag me!

i am dragged only by my inner handle
we first register the inner box as a drag source, then change it's target to the outer box

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< script  type ="text/javascript" > ...
    var djConfig = ...{ isDebug: true };
script >
< script  type ="text/javascript"  src ="dojo-0.4/dojo.js" > script >
< script  type ="text/javascript" > ...
    dojo.require("dojo.html");
    dojo.require("dojo.dnd.*");
    dojo.require("dojo.event.*");

    function init()...{
        dojo.html.disableSelection(dojo.byId('inner1'));

        var drag = new dojo.dnd.HtmlDragSource(dojo.byId('outer1'));
        drag.setDragHandle(dojo.byId('inner1'));

        var drag = new dojo.dnd.HtmlDragSource(dojo.byId('inner2'));
        drag.setDragTarget(dojo.byId('outer2'));
    }

    dojo.event.connect(dojo, "loaded", "init");        
script >

< style > ...
.outer {...}{
    position: absolute;
    top: 41px;
    left: 14px;
    width: 300px;
    height: 300px;
    background-color: lightblue;
}

.inner {...}{
    position: absolute;
    top: 100px;
    left: 10px;
    width: 100px;
    height: 30px;
    background-color: pink;
}

#outer2 {...}{
    left: 446px;
}

style >


< title > Dragging-1 title >
head >

< body >

< div  class ="outer"  id ="outer1" >
     < div  class ="inner"  id ="inner1" >
        drag me!
     div >
    i am dragged only by my inner handle < br  />
    we first register the outer box as a drag source, then change it's handle to the inner box
div >

< div  class ="outer"  id ="outer2" >
     < div  class ="inner"  id ="inner2" >
        drag me!
     div >
    i am dragged only by my inner handle < br  />
    we first register the inner box as a drag source, then change it's target to the outer box
div >

body >
html >