JavaScript DHTML/SmartClient/Drag Drop
Содержание
- 1 A Widget showing dragTargetResize on all edges
- 2 Drag and drop between two grids
- 3 Drag and drop data to a grid
- 4 Drag and drop to a container
- 5 Drag and drop to reorder
- 6 Drag effect: translucent, shadow and outline
- 7 Draggable
- 8 Drag handler
- 9 Drag pan
- 10 Drag snap to
- 11 Drag to move
- 12 Drag to move an Image object
- 13 Drag to reorder
- 14 Drag to resize from any side, or from bottom and right only
- 15 Drag tracker
- 16 Drag traker by setting color for drag over, drag out
- 17 Drop over on widget intersection
- 18 Drop zone
- 19 Handle drag event
- 20 Outline drag
A Widget showing dragTargetResize on all edges
<source lang="html4strict">
<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> <SCRIPT> // -------------------------------------------------- // A Widget showing dragTargetResize on all edges // -------------------------------------------------- Canvas.create({
ID:"dragTargetResize", left:50, top:125, width:100, height:100, minHeight:50, minWidth:50, overflow:"hidden", contents:"dragAppearance set to Target<\/i>.
Can Resize from all corners and sides.", backgroundColor:"violet", canDragResize:true, resizeFrom:null, // All corners/edges dragAppearance:"target"
});
</SCRIPT> </BODY> </HTML>
</source>
Drag and drop between two grids
<source lang="html4strict">
<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 BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
ListGrid drag-and-drop example |
Isomorphic SmartClient |
| <IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<SCRIPT>
// Data to be displayed
var animalData1 = [
{canAcceptDrop:false, commonName:"Anaconda *", scientificName:"Eunectes murinus",diet:"Carnivore",lifeSpan:"unknown",information:"The anaconda is an excellent swimmer, but it also climbs on branches to dry off. It uses the water to rapidly escape predators and to conceal itself while searching for food. The anaconda is the world"s longest, heaviest, and most powerful snake.",status:"Not currently listed"},
{commonName:"Elephant (African)",scientificName:"Loxodonta africana",diet:"Herbivore",lifeSpan:"40-60 years",information:"The African Elephant is the largest of all land animals and also has the biggest brain of any land animal. Both males and females have ivory tusks. Elephants are also wonderful swimmers. Man is the only real enemy of the elephant. Man threatens the elephant by killing it for its tusks and by destroying its habitat.",status:"Threatened"},
{commonName:"Alligator (American)",scientificName:"Allligator mississippiensis",diet:"Carnivore",lifeSpan:"50 years",information:"In the 16th century, Spanish explorers in what is now Florida encountered a large formidable animal which they called "el largo" meaning "the lizard". The name "el largo" gradually became pronounced "alligator".",status:"Not Endangered"},
{commonName:"Anteater",scientificName:"Myrmecophaga tridactyla",diet:"Ground dwelling ants/termites",lifeSpan:"25 years",information:"Anteaters can eat up to 35,000 ants daily. Tongue is around 2 feet long and is not sticky but rather covered with saliva. They have very strong sharp claws used for digging up anthills and termite mounds.",status:"Not Endangered"},
{commonName:"Camel (Arabian Dromedary)",scientificName:"Camelus dromedarius",diet:"Herbivore",lifeSpan:"20-50 years",information:"Can eat any vegetation including thorns. Has one hump for fat storage. Is well known as a beast of burden.",status:"Not Endangered"},
{commonName:"Bald Eagle",scientificName:"southern subspecies: Haliaeetus leucocephalus leuc",diet:"Carnivore",lifeSpan:"Up to 50 years",information:" Females lay one to three eggs. Visual acuity is 3-4 times greater than a human. Bald eagles build the largest nest of any North American bird. The largest nest found was 3.2 yds (2.9 m) in diameter and 6.7 yds (6.1 m) tall. Protection of the Bald Eagle is afforded by three federal laws: (1) the Endangered Species Act, (2) the Bald Eagle and Golden Eagle Protection Act, and (3) the Migratory Bird Treaty Act.",status:"Endangered"},
{commonName:"Black Spider Monkey",scientificName:"Ateles panicus",diet:"Herbivore",lifeSpan:"20 years",information:"They can perform remarkable feats with their tails.",status:"Not Endangered"},
{commonName:"Bottlenosed Dolphin",scientificName:"Tursiops truncatus",diet:"Fish shrimp eels and squid",lifeSpan:"35 years",information:"The bottlenosed dolphin is classified as a toothed whale. They are excellent hunters. They use sound waves to "see" their environment and where they are going through a process known as echolocation.",status:"Dolphins are vulnerable to commercial fishing practices and ocean pollution."},
{commonName:"Boa Constrictor(Common)",scientificName:"Boa constrictor constrictor",diet:"Carnivore",lifeSpan:"40 years",information:"Boas kill by constriction, actually suffocating rather than crushing their prey. Spend time in trees but are primarily ground dwellers.",status:"Not Endangered"},
{commonName:"Screech Owl(Common)",scientificName:"Otus asio",diet:"Carnivore",lifeSpan:"10 years",information:" Generally does not migrate, most common in North America. Three color phases: red, grey and brown.",status:"Not Endangered"},
{commonName:"Costas Hummingbird",scientificName:"Calypte costae",diet:"Nectar and small insects",lifeSpan:"Up to 12 years",information:"Costas habit of soaring between flower beds is helpful in distinguishing it. Has a preference for red flowers. Males do not participate in nesting or raising young. Of the seven major species breeding in the West, the Costas prefers the driest climates. Nests are frequently held together with spider webs.",status:"Not Endangered"}
],
animalData2 = [
{commonName:"Baboon (Guinea Baboon)",scientificName:"Papio papio",diet:"Omnivore",lifeSpan:"25-30 years",information:"These baboons live in large groups which consist of a hierarchical group structure based on a dominating male while breeding occurs; after breeding, the male leaves and a dominant female leads the troop. Much of their time is spent in feeding, grooming, and sleeping.",status:"May become threatened"},
{commonName:"Howler Monkey",scientificName:"Alouatta spp.",diet:"Herbivore",lifeSpan:"Over 20 years",information:" These animals produce a low growling sound that has been compared to the roar of a lion. These calls can be heard up to 3 km through the forest and are used to communicate danger as well as keeping the troop together.",status:"Endangered"},
{commonName:"Indian Rock Python",scientificName:"Python molurus molurus",diet:"Carnivore",lifeSpan:"20-30 years",information:"Can become very tame. The Python species are covered by import regulations and are therefore most available as captive bred specimens. Frightening numbers of these snakes have been killed for the leather trade.",status:"Not Endangered"},
{commonName:"Koala",scientificName:"Phascolarctos cinereus",diet:"Herbivore (Eucalyptus leaves)",lifeSpan:"10-15 years",information:"Koalas do not require water. Males larger than females. Noctural/crepuscular, sleeps up to 19 hours a day. Young are carried on mothers back after leaving pouch.",status:"Protected"},
{commonName:"Lion",scientificName:"Panthera leo - various subspecies",diet:"Carnivore",lifeSpan:"15 years",information:"Males have manes on cheeks and throat, some species have manes on shoulders and bellies. Young lions have leopard like markings. A pride usually consists of 4-12 related adult females, their offspring and 1-6 adult males. Lions eat animals weighing 110 or 1100 lbs.",status:"Endangered (Asiatic Lion only)"},
{commonName:"Salamander (Marbled Salamander)",scientificName:"Ambystoma opacum",diet:"Carnivore",lifeSpan:"5 to 8 years",information:"It is a beautiful animal, black with white or silvery bands. Lives well in captivity.",status:"Not Endangered."},
{commonName:"Orangutan",scientificName:"Pongo pygmaeus",diet:"Fruits, Vegetation and Birds eggs",lifeSpan:"Up to 50 years",information:"Orangutan means "man of the forest". Enemies include tigers, clouded leopard, humans.",status:"Endangered"},
{commonName:"Ostrich",scientificName:"Struthio camelus",diet:"Insects, Fruit, seeds and grasses",lifeSpan:"40-50 years",information:"Largest of living birds. Adult males may exceed 8 feet in height and 300 lbs. in weight. In Egypt, the ostrich was the emblem of the Goddess of Truth and Justice.",status:"Endangered"},
{commonName:"Piranha",scientificName:"Plecostomus - Hypostomus plecostomus",diet:"Carnivore (mainly smaller fish)",lifeSpan:"Unknown",information:"Afraid of nothing; will attack any animal regardless of size. Is attracted by the smell of blood. Considered the most dangerous fish in the Amazon",status:"Not Endangered"},
{commonName:"Platypus",scientificName:"Ornithorhynchus Anatinus",diet:"Insects and Larvae",lifeSpan:"10-15 years",information:"Were thought to be a hoax when first discovered. The male has a venemous spur on his hind legs. Capable of many vocalizations including sounds like a growling puppy and a brooding hen.", status:"Not Endangered"},
{commonName:"Polar Bear",scientificName:"Ursus maritimus",diet:"Carnivore",lifeSpan:"30-40 years",information:"The polar bear is the largest non-aquatic carnivore. Its stomach can hold more than 150 lbs of food. The polar bears fur is water repellant and the individual hairs are clear due to hollow hair shafts. The feet of the polar bear serve as snow boots and as paddles when they are in the water.",status:"Protected in Russia"}
],
briefAnimalFields = [
// Note: Columns not included in this list will not show up in the List viewer
{name:"commonName", title:"Animal"},
{name:"scientificName", title:"Scientific Name"}
// {name:"lifeSpan", title:"Life Span"},
// {name:"status",title:"Endangered Species Status"}
// {name:"diet", title:"Diet"},
// {name:"information", title:"Interesting Fact"}
],
verboseAnimalFields = [
{name:"commonName", title:"Animal"},
{name:"scientificName", title:"Scientific Name"},
{name:"lifeSpan", title:"Life Span"},
{name:"diet", title:"Diet"},
{name:"status", title:"Endangered Status"}
];
ListGrid.create({
ID:"list1", data:animalData1, fields:briefAnimalFields, left:50, top:75, width:300, height:300, cellPadding:3, alternateRecordStyles:true, canDragRecordsOut:true, canAcceptDroppedRecords:true, canReorderRecords:true, canReorderFields:true, canResizeFields:true
}); ListGrid.create({
ID:"list2", autoDraw:false, data:animalData2, fields:verboseAnimalFields, left:25, top:25, width:500, height:300, cellPadding:3, alternateRecordStyles:true, canDragRecordsOut:true, canAcceptDroppedRecords:true, canReorderRecords:false, canReorderFields:true, canResizeFields:true
}); Canvas.create({
ID:"list2Canvas", left:400, top:50, width:550, height:350, backgroundColor:"pink", children:[list2]
}); Label.create({
ID:"footnote", left:75, top:375, width:300, contents:"* - canAcceptDrop property set to false"
}); </SCRIPT> </BODY> </HTML>
</source>
Drag and drop data to a grid
<source lang="html4strict">
<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/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.TileGrid.create({
ID: "testList", width: 500, height: 400, autoDraw:false,
tileWidth:150,
tileHeight:170,
data: [
{
picture:"Camel.jpg",
commonName:"Arabian Camel",
information:"Can eat any vegetation including thorns. Has one hump for fat storage. Is well known as a beast of burden.",
lifeSpan:50,
scientificName:"Camelus dromedarius",
diet:"Herbivore",
status:"Not Endangered"
},
{
picture:"BaldEagle.jpg",
commonName:"Bald Eagle",
information:" Females lay one to three eggs. Visual acuity is 3-4 times greater than a human. Bald eagles build the largest nest of any North American bird. The largest nest found was 3.2 yds (2.9 m) in diameter and 6.7 yds (6.1 m) tall. Protection of the Bald Eagle is afforded by three federal laws: (1) the Endangered Species Act, (2) the Bald Eagle and Golden Eagle Protection Act, and (3) the Migratory Bird Treaty Act.",
lifeSpan:50,
scientificName:"southern subspecies: Haliaeetus leucocephalus leuc",
diet:"Carnivore",
status:"Endangered"
},
{
picture:"BlackSpiderMonkey.jpg",
commonName:"Black Spider Monkey",
information:"They can perform remarkable feats with their tails.",
lifeSpan:20,
scientificName:"Ateles panicus",
diet:"Herbivore",
status:"Not Endangered"
}
],
canAcceptDrop: true,
canDrag: true,
fields: [
{name:"picture", type:"image", imageURLPrefix:"/isomorphic/system/reference/inlineExamples/tiles/images/"},
{name:"commonName"}
]
});
isc.HLayout.create({
membersMargin: 10,
members: [
isc.ListGrid.create({
ID: "testGrid", autoDraw:false,
width:300, height: 400,
canDragRecordsOut: true,
canAcceptDroppedRecords: true,
canReorderRecords: true,
fields: [
{name:"commonName", title:"Common Name"},
{name:"lifeSpan", title:"Lifespan"},
{name:"status", title:"Status"}
]
}),
testList
]
});
</SCRIPT>
</BODY>
</HTML>
</source>
Drag and drop to a container
<source lang="html4strict">
<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 BGCOLOR="silver"> <SCRIPT> isc.defineClass("DragPiece", "Img").addProperties({
width:48, height:48,
cursor: "move",
appImgDir: "isomorphic/system/reference/exampleImages/pieces/48/",
canDrag: true,
canDrop: true,
dragAppearance: "tracker",
setDragTracker: "isc.Event.setDragTracker(isc.Canvas.imgHTML("pieces/24/"+this.src,24,24),24,24,15,15)"
}) isc.defineClass("DroppedPiece", "Img").addProperties({
width:24, height:24, appImgDir: "pieces/24/", canDragReposition: true, keepInParentRect: true, dragAppearance: "target", showContextMenu: "this.destroy(); return false;"
}) isc.defineClass("PieceBin", "Canvas").addProperties({
width:100, height:100, overflow:"hidden",
showEdges: true,
edgeSize: 6,
showContextMenu: "return false",
canAcceptDrop: true,
dropOver: "if (this.willAcceptDrop()) this.setBackgroundColor("#ffff80")",
dropOut: "this.setBackgroundColor("#ffffff")",
drop: function () {
this.addChild(isc.DroppedPiece.create({
src: isc.Event.getDragTarget().src,
left: this.getOffsetX()-15-this.edgeSize,
top: this.getOffsetY()-15-this.edgeSize
}))
}
}) isc.VStack.create({members:[ isc.HStack.create({layoutMargin:20, membersMargin:40, layoutAlign:"center", members:[
isc.DragPiece.create({src:"cube_blue.png", dragType:"b"}),
isc.DragPiece.create({src:"cube_yellow.png", dragType:"y"}),
isc.DragPiece.create({src:"cube_green.png", dragType:"g"})
]}), isc.HStack.create({membersMargin:20, members:[
isc.PieceBin.create({edgeImage:"edges/blue/6.png", dropTypes:"b"}),
isc.PieceBin.create({edgeImage:"edges/yellow/6.png", dropTypes:"y"}),
isc.PieceBin.create({edgeImage:"edges/green/6.png", dropTypes:"g"}),
isc.PieceBin.create({edgeImage:"edges/gray/6.png", dropTypes:["b","y","g"]})
]}) ]})
</SCRIPT>
</BODY>
</HTML>
</source>
Drag and drop to reorder
<source lang="html4strict">
<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/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.defineClass("DragPiece", "Img").addProperties({
width:48, height:48, layoutAlign:"center", canDragReposition:true, canDrop:true, dragAppearance:"target", appImgDir:""
})
isc.VStack.create({
showEdges:true, edgeImage:"edges/green/6.png",
membersMargin:10, layoutMargin:10,
canAcceptDrop:true,
animateMembers:true,
dropLineThickness:4,
dropLineProperties:{backgroundColor:"#40c040"},
members:[
isc.DragPiece.create({src:"pawn_blue.png"}),
isc.DragPiece.create({src:"pawn_green.png"}),
isc.DragPiece.create({src:"pawn_yellow.png"})
]
}) isc.HStack.create({
left:120,
showEdges:true, edgeImage:"edges/blue/6.png",
membersMargin:10, layoutMargin:10,
canAcceptDrop:true,
animateMembers:true,
showDragPlaceHolder:true,
placeHolderProperties:{border:"1px solid #4040ff"},
members:[
isc.DragPiece.create({src:"cube_blue.png"}),
isc.DragPiece.create({src:"cube_green.png"}),
isc.DragPiece.create({src:"cube_yellow.png"})
]
})
</SCRIPT> </BODY> </HTML>
</source>
Drag effect: translucent, shadow and outline
<source lang="html4strict">
<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/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.defineClass("DragLabel", "Label").addProperties({
top:50, align:"center", padding:4, showEdges:true, backgroundColor:"#e0e0ff", keepInParentRect:true, canDragReposition:true
}) isc.DragLabel.create({
left:50, contents:"Translucent", dragAppearance:"target", dragOpacity:60
}) isc.DragLabel.create({
left:200, contents:"Shadow", dragAppearance:"target", showDragShadow:true, dragShadowDepth:8
}) isc.DragLabel.create({
left:350, contents:"Outline", dragAppearance:"outline"
})
</SCRIPT>
</BODY>
</HTML>
</source>
Draggable
<source lang="html4strict">
<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> <SCRIPT> Window.create({
ID:"w",
title:"Window 3",
width:550, height:550,
autoDraw:false,
isModal:true,
canDragResize:false,
autoCenter:true,
showHeaderIcon:false,
showMinimizeButton:false,
showMaximizeButton:false,
showFooter:true,
items:[
Label.create({
autoDraw:false,
height:50,
contents:"This is an auto-centered modal window.
" +
"You cannot interact with other UI components while this window is open."
})
]
}); w.show(); w.setStatus("setStatus at "+timeStamp());
</SCRIPT> </BODY> </HTML>
</source>
Drag handler
<source lang="html4strict">
<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>
<form action="" method="POST" name="f">
<input type="Checkbox" name="intersect" onclick="setIntersectStyles(this.checked)">dropOver on widget intersection
<input type="Checkbox" name="resetPos">reset widget position on dragRepositionStop
</form>
<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>
</source>
Drag pan
<source lang="html4strict">
<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/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Img.create({
left:50, top:50, width:200, height:200, overflow:"hidden", showEdges:true, padding:20, src:"http://www.wbex.ru/style/logo.png", imageType:"normal", canDrag: true, cursor: "all-scroll", dragAppearance: "none", dragStart: function () { this.startScrollLeft = this.getScrollLeft(); this.startScrollTop = this.getScrollTop(); }, dragMove: function () { this.scrollTo( this.startScrollLeft - isc.Event.lastEvent.x + isc.Event.mouseDownEvent.x, this.startScrollTop - isc.Event.lastEvent.y + isc.Event.mouseDownEvent.y ) }
})
</SCRIPT> </BODY> </HTML>
</source>
Drag snap to
<source lang="html4strict">
<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/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Canvas.create({
ID: "gridCanvas",
autoDraw: false,
backgroundImage: "[SKIN]grid.gif",
border: "1px solid blue",
width: 400,
height: 300,
childrenSnapToGrid: true,
childrenSnapResizeToGrid: true,
overflow: "hidden",
children: [
isc.Label.create({
width: 80, height: 40, align: "center",
contents: "Drag or Resize me",
backgroundColor: "white",
showEdges: true,
canDragReposition: true,
canDragResize: true,
dragAppearance: "target",
keepInParentRect: true
})
]
}); isc.DynamicForm.create({
ID: "gridForm",
width: 400,
values: {snapDrag: true, snapResize: true, hgap: 20, vgap: 20},
numCols: 4,
fields: [{
name: "snapDrag", title: "Enable Snap-To-Grid Move", type: "checkbox",
changed: "gridCanvas.setProperty("childrenSnapToGrid", !gridCanvas.childrenSnapToGrid)"
}, {
name: "snapResize", title: "Enable Snap To Grid Resize", type: "checkbox",
changed: "gridCanvas.setProperty("childrenSnapResizeToGrid", !gridCanvas.childrenSnapResizeToGrid)"
}, {
name: "hgap", title: "Horizontal snap-to gap", type: "radioGroup",
valueMap: {10: "10 pixels", 20: "20 pixels", 50: "50 pixels"},
changed: "gridCanvas.setProperty("snapHGap", Number(this.getValue()))"
}, {
name: "vgap", title: "Vertical snap-to gap", type: "radioGroup",
valueMap: {10: "10 pixels", 20: "20 pixels", 50: "50 pixels"},
changed: "gridCanvas.setProperty("snapVGap", Number(this.getValue()))"
}
]
}); isc.VLayout.create({
membersMargin: 10,
members: [
gridCanvas, gridForm
]
})
</SCRIPT>
</BODY>
</HTML>
</source>
Drag to move
<source lang="html4strict">
<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/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.defineClass("DragPiece", "Img").addProperties({
width:48, height:48, layoutAlign:"center", canDragReposition:true, canDrop:true, dragAppearance:"target", appImgDir:""
})
isc.VStack.create({
showEdges:true, edgeImage:"edges/green/6.png",
membersMargin:10, layoutMargin:10,
canAcceptDrop:true,
animateMembers:true,
dropLineThickness:4,
dropLineProperties:{backgroundColor:"#40c040"},
members:[
isc.DragPiece.create({src:"pawn_blue.png"}),
isc.DragPiece.create({src:"pawn_green.png"}),
isc.DragPiece.create({src:"pawn_yellow.png"})
]
}) isc.HStack.create({
left:120,
showEdges:true, edgeImage:"edges/blue/6.png",
membersMargin:10, layoutMargin:10,
canAcceptDrop:true,
animateMembers:true,
showDragPlaceHolder:true,
placeHolderProperties:{border:"1px solid #4040ff"},
members:[
isc.DragPiece.create({src:"cube_blue.png"}),
isc.DragPiece.create({src:"cube_green.png"}),
isc.DragPiece.create({src:"cube_yellow.png"})
]
})
</SCRIPT> </BODY> </HTML>
</source>
Drag to move an Image object
<source lang="html4strict">
<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/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Img.create({
left:100, top:50, width:48, height:48, src: "http://www.wbex.ru/style/logo.png", canDragReposition: true, keepInParentRect: true, dragAppearance: "target"
})
</SCRIPT> </BODY> </HTML>
</source>
Drag to reorder
<source lang="html4strict">
<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/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.defineClass("DragPiece", "Img").addProperties({
width:48, height:48, layoutAlign:"center", canDragReposition:true, canDrop:true, dragAppearance:"target", appImgDir:"pieces/48/"
}) isc.HStack.create({
membersMargin:10,
canAcceptDrop:true,
animateMembers:true,
dropLineThickness:4,
members:[
isc.DragPiece.create({src:"pawn_blue.png"}),
isc.DragPiece.create({src:"pawn_red.png"}),
isc.DragPiece.create({src:"pawn_green.png"}),
isc.DragPiece.create({src:"pawn_yellow.png"}),
isc.DragPiece.create({src:"pawn_white.png"})
]
})
</SCRIPT> </BODY> </HTML>
</source>
Drag to resize from any side, or from bottom and right only
<source lang="html4strict">
<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/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.defineClass("DragLabel", "Label").addProperties({
align:"center", padding:4, showEdges:true, minWidth:70, minHeight:70, maxWidth:300, maxHeight:200, keepInParentRect:true, canDragReposition:true, dragAppearance:"target"
}) isc.DragLabel.create({
left:80, top:80, contents:"Resize from any side", canDragResize:true, edgeMarginSize:10 // easier to grab than the default 5px margin
}) isc.DragLabel.create({
left:280, top:80, contents:"Resize from bottom or right", canDragResize:true, resizeFrom:["B","R","BR"], edgeMarginSize:10
})
</SCRIPT> </BODY> </HTML>
</source>
Drag tracker
<source lang="html4strict">
<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>
<form action="" method="POST" name="f">
<input type="Checkbox" name="intersect" onclick="setIntersectStyles(this.checked)">dropOver on widget intersection
<input type="Checkbox" name="resetPos">reset widget position on dragRepositionStop
</form>
<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>
</source>
Drag traker by setting color for drag over, drag out
<source lang="html4strict">
<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/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Img.create({
ID:"bluePiece", left:50, top:50, width:48, height:48, src:"http://www.wbex.ru/style/logo.png", canDrag: true, canDrop: true, dragAppearance: "tracker", setDragTracker: "isc.Event.setDragTracker("Blue Piece")"
}) isc.Img.create({
ID:"greenPiece", left:150, top:50, width:48, height:48, src:"http://www.wbex.ru/style/logo.png", canDrag: true, canDrop: true, dragAppearance: "tracker", setDragTracker: "isc.Event.setDragTracker(isc.Canvas.imgHTML("http://www.wbex.ru/style/logo.png",24,24))"
}) isc.Label.create({
left:250, top:50, showEdges:true,
contents: "Drop Here", align:"center",
canAcceptDrop: true,
dropOver: "this.setBackgroundColor("#ffff80")",
dropOut: "this.setBackgroundColor("#ffffff")",
drop: "isc.say("You dropped the "+isc.Event.getDragTarget().getID())"
}) </SCRIPT> </BODY> </HTML>
</source>
Drop over on widget intersection
<source lang="html4strict">
<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>
<form action="" method="POST" name="f">
<input type="Checkbox" name="intersect" onclick="setIntersectStyles(this.checked)">dropOver on widget intersection
<input type="Checkbox" name="resetPos">reset widget position on dragRepositionStop
</form>
<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>
</source>
Drop zone
<source lang="html4strict">
<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>
<form action="" method="POST" name="f">
<input type="Checkbox" name="intersect" onclick="setIntersectStyles(this.checked)">dropOver on widget intersection
<input type="Checkbox" name="resetPos">reset widget position on dragRepositionStop
</form>
<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>
</source>
Handle drag event
<source lang="html4strict">
<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/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver">
<SCRIPT> isc.Img.create({
ID:"greenPiece",
width:48, height:48, src:"pieces/48/pawn_green.png",
canDrag: true,
canDrop: true,
dragAppearance: "tracker",
setDragTracker: "isc.Event.setDragTracker(isc.Canvas.imgHTML("pieces/24/pawn_green.png",24,24))"
}); isc.Label.create({
left: 100,
width: 300,
height: 300,
backgroundColor: "lightblue",
styleName:"blackText",
align: "center",
contents: "Show Drop Reticle",
overflow: "hidden",
canAcceptDrop: true,
initWidget : function () {
this.Super("initWidget", arguments);
var props = {
autoDraw: false,
// oversize so we don"t ever show both borders
width: this.getWidth()+2,
height: this.getHeight()+2,
border: "1px solid black",
visibility: "hidden"
};
this.crossHairX = isc.Canvas.create(props);
this.crossHairY = isc.Canvas.create(props);
this.addChild(this.crossHairX);
this.addChild(this.crossHairY);
},
dropOver : function () {
this.crossHairX.show();
this.crossHairY.show();
this.updateCrossHairs();
},
dropMove : function () {
this.updateCrossHairs();
},
dropOut : function () {
this.crossHairX.hide();
this.crossHairY.hide();
},
updateCrossHairs : function () {
var x = this.getOffsetX();
var y = this.getOffsetY();
// crossHairX is the -X and +Y axis of the crossHair
this.crossHairX.setLeft(x-this.getWidth()-1);
this.crossHairX.setTop(y-this.getHeight()-1);
// crossHairY is +X, -Y
this.crossHairY.setLeft(x);
this.crossHairY.setTop(y);
}
}); </SCRIPT>
</BODY> </HTML>
</source>
Outline drag
<source lang="html4strict">
<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>
<form action="" method="POST" name="f">
<input type="Checkbox" name="intersect" onclick="setIntersectStyles(this.checked)">dropOver on widget intersection
<input type="Checkbox" name="resetPos">reset widget position on dragRepositionStop
</form>
<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>
</source>
