Drag tracker : Drag Drop « SmartClient « JavaScript DHTML






Drag tracker

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.

Open Source License

SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html

If your project precludes the use of this license, or if you'd like to support SmartClient LGPL, 
we encourage you to buy a commercial license.

Icon Experience Collection

Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.com) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.

All other media found under the isomorphic/skins directory may be used under the LGPLv3.

Commercial Licenses

A number of commercial licenses are available for purchase. Please see http://smartclient.com/license.

Warranty Disclaimer

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.

Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 


-->

<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->



<HTML><HEAD>
  <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
  <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY>
<!-- HTML form containing two checkbox controls -->
<DIV STYLE='padding:0px 0px 0px 20px' CLASS='normal'>
<form action="" method="POST" name="f">
<input type="Checkbox" name="intersect" onclick="setIntersectStyles(this.checked)">dropOver on widget intersection<br>
<input type="Checkbox" name="resetPos">reset widget position on dragRepositionStop
</form>
</DIV>
<SCRIPT>
// --------------------------------------------------
//    canDragReposition widget with TARGET dragAppearance
// --------------------------------------------------

Canvas.create({
    ID:"dragReposition",
    left:50,
    top:125,
    width:100,
    height:100,
    contents:"Target Drag",
    backgroundColor:"violet",
    canDragReposition:true,
    canDrop:true,
    dragAppearance:"target",
    dragRepositionStop:"if (resetPosition.checked) return false;"
});


// --------------------------------------------------
//    Outline Drag widget...
// --------------------------------------------------
Canvas.create({
    ID:"dragOutline",
    left:310,
    top:125,
    width:100,
    height:100,
    canDragReposition:true,
    canDrop:true,
    contents:"Outline Drag",
    backgroundColor:"gold",
    dragAppearance:"outline",
    dragRepositionStop:"if (resetPosition.checked) return false;"
});

// --------------------------------------------------
//    canDrag widget with TRACKER dragAppearance
// --------------------------------------------------
Canvas.create({
    ID:"dragTracked",
    left:50,
    top:385,
    width:100,
    height:100,
    contents:"Use Drag Tracker",
    backgroundColor:"lightgreen",
    canDragReposition:true,
    canDrop:true,
    dragAppearance:"tracker",
    setDragTracker:"EventHandler.setDragTracker(this.imgHTML('yinyang_icon.gif',20,20))",
    dragRepositionStop:"if (resetPosition.checked) return false;"
});


// --------------------------------------------------
//    Parent of next widget
// --------------------------------------------------
Canvas.create({
    ID:"topParent",
    left:310,
    top:385,
    width:100,
    height:100,
    canDrop:true,
    contents:"parent",
    backgroundColor:"salmon",
    dragRepositionStop:"if (resetPosition.checked) return false;",
    dragAppearance:"outline"

});
// --------------------------------------------------
//    canDragReposition child widget with dragTarget set to "top"
// --------------------------------------------------
Canvas.create({
    ID:"dragRepositionTop",
    autoDraw:false,
    left:20,
    top:20,
    width:60,
    height:60,
    contents:"Drag Reposition Top",
    backgroundColor:"mediumpurple",
    canDragReposition:true,
    dragTarget:"top"
});
topParent.addChild(dragRepositionTop);


// --------------------------------------------------
//    canAcceptDrop widget
// --------------------------------------------------
Canvas.create({
    ID:"dropZone",
    left:180,
    top:255,
    width:100,
    height:100,
    contents:"Drop Zone",
    backgroundColor:"skyblue",
    canAcceptDrop:true,
    dropOver:"this.setBackgroundColor('powderblue')",
    dropOut:"this.setBackgroundColor('skyblue')",
    drop:"alert('drop')"
});
//dropZone.sendToBack();



// --------------------------------------------------
//    scripts for working with the HTML form
// --------------------------------------------------

// shortcut references to form elements
var resetPosition = document.f.resetPos;

// switch dragIntersectStyles
function setIntersectStyles(on) {
    if (on) {
    dragTracked.dragIntersectStyle="rect";
    dragTracked.setContents("Use Drag Tracker (intersect rect)");
    dragReposition.dragIntersectStyle="rect";
    dragReposition.setContents("Drag Reposition (intersect rect)");
    dragOutline.dragIntersectStyle="rect";
    dragOutline.setContents("Outline Drag (intersect rect)");
    // NOTE: you need to change the dragIntersectStyle of the topParent,
    //    since that ends up being the dragTarget
    topParent.dragIntersectStyle="rect";
    dragRepositionTop.setContents("Drag Reposition Top (intersect rect)");
    }
    else {
    dragTracked.dragIntersectStyle="mouse";
    dragTracked.setContents("Use Drag Tracker");
    dragReposition.dragIntersectStyle="mouse";
    dragReposition.setContents("Drag Reposition");
    dragOutline.dragIntersectStyle="mouse";
    dragOutline.setContents("Outline Drag");
    // NOTE: you need to change the dragIntersectStyle of the topParent,
    //    since that ends up being the dragTarget
    topParent.dragIntersectStyle="mouse";
    dragRepositionTop.setContents("Drag Reposition Top");
    }
}

// initialize the form
function initializeForm() {
    document.f.intersect.checked = false;
    resetPosition.checked = true;
}

Page.setEvent("load", "initializeForm()");

</SCRIPT>
</BODY>
</HTML>

   
  








Related examples in the same category

1.Drag and drop to a container
2.Drag effect: translucent, shadow and outline
3.Drag to move
4.Drag and drop to reorder
5.Drag pan
6.Drag to reorder
7.Drag snap to
8.Drag and drop data to a grid
9.Drag and drop between two grids
10.Handle drag event
11.Drop zone
12.Outline drag
13.Drag handler
14.Drop over on widget intersection
15.Draggable
16.Drag to move an Image object
17.Drag to resize from any side, or from bottom and right only
18.Drag traker by setting color for drag over, drag out
19.A Widget showing dragTargetResize on all edges