DynAPI Examples - Drag Drop /w Collision Detection : Drag Drop « GUI Components « JavaScript DHTML






DynAPI Examples - Drag Drop /w Collision Detection


<html>
<head>
<title>DynAPI Examples - Drag Drop /w Collision Detection</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
  dynapi.library.setPath('./dynapisrc/');
  dynapi.library.include('dynapi.api');
  dynapi.library.include('dynapi.api.ext.DragEvent');
  dynapi.library.include('dynapi.fx.MotionX');

  dynapi.library.include('dynapi.functions.Color');

</script>
<script language="Javascript">
  var l1,l2,l3;

  l1=new DynLayer(null,50,50,50,50,'yellow');
  l2=new DynLayer(null,250,50,100,100,'green');
  l3=new DynLayer(null,250,200,100,100,'blue');

  l1.makeSolid();
  l2.makeSolid();
  l3.makeSolid();

  l1.setZIndex(100);

  DragEvent.enableDragEvents(l1)

  // note: click event added to l1
  l1.addEventListener({
    oncollide:function(e){
      var o=e.getSource();
      var c=o.getObstacle();
      c.setBgColor(dynapi.functions.getRandomColor());
    },
    ondragend:function(e){
      var o=e.getSource();
      var c=o.getObstacle();
      if(c) c.setHTML(new Date());
    }
  });

  dynapi.document.addChild(l1)
  dynapi.document.addChild(l2)
  dynapi.document.addChild(l3)

</script>
</head>
<body>
Drag & Drop the Yellow Layer over the Red and Green layers
<script>
  dynapi.document.insertAllChildren();
</script>
</body>
</html>

           
       








dynapi.zip( 791 k)

Related examples in the same category

1.Display Drag Icon in drag and drop
2.Drag Over Event: Drag and Drop the file over recycle bins
3.Yahoo! UI Library - Drag and Drop 1
4.Yahoo! UI Library - Drag and Drop 2
5.Yahoo! UI Library - Drag and Drop 3
6.Yahoo! UI Library - Drag and Drop 5
7.Dragged object is on top
8.Drag and Drop - DDProxy
9.Yahoo! UI Library - Drag and Drop: Resize
10.Drag and Drop: Multiple groups, targetable affordance
11.Drag and Drop to sort slides
12.Drag and Drop to sort lists
13.Drag inside and outside a range
14.Drag still
15.Crop an image
16.Drag and drop custom window with title bar
17.Dragable float window with scrollable text inside
18.Dragable transparent window
19.Drag within a range 2
20.Dragable sorted list
21.Dragable and sortable toolbar