ZIM BITS TUTORIAL
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM BITS - Drag and Drag Copy</title>
<!-- Welcome to ZIM at https://zimjs.com - Code Creativity! -->
<!-- ZIM runs on the HTML Canvas powered by JavaScript and CreateJS https://createjs.com -->
<!-- Founded by Inventor Dan Zen - http://danzen.com - Canadian New Media Award Winner -->
<!-- ZIM is free to use. You can donate to help improve ZIM at http://zimjs.com/donate -->
<script src="https://zimjs.org/cdn/1.3.4/createjs.js"></script>
<script src="https://zimjs.org/cdn/01/zim_min.js"></script>
<!-- use zimjs.com/distill for minified individual functions! -->
<script src="https://zimjs.com/bits/footer10.js"></script><!-- you will not need this -->
<script>
// SCALING OPTIONS
// scaling can have values as follows with full being the default
// FIT sets canvas and stage to dimensions and scales to fit inside window size
// FILL sets canvas and stage to dimensions and scales to fit outside window size
// FULL sets stage to window size with no scaling
// "tagID" add canvas to HTML tag of ID - set to dimensions if provided - no scaling
const scaling = FIT; // this will resize to fit inside the screen dimensions
const width = 1000;
const height = 800;
const color = dark;
const outerColor = light;
new Frame(scaling, width, height, color, outerColor, ready);
function ready() {
// given F (Frame), S (Stage), W (width), H (height)
// ZIM BITS - Drag and Drag Copy (2016 - updated 2022)
// ZIM has a drag(obj) function that does both drag and drop
// if ever you do not want the object to be dragable use noDrag(obj)
// you can optionally set the bounds to drag within and more (see docs)
// STEPS - DRAG WITHIN BOUNDS
// 1. create the object to drag - and usually add it to the stage
// 2. make an optional bounding createjs.Rectangle
// 3. apply the drag() function
// 1. create object to drag
// 2. can optionally supply a Boundary rectangle to limit our drag
const bounds = new Boundary(100,100,700,400);
const rectangle = new Rectangle(90,90, "#ccc", "#e472c4", 10) // chain on methods so don't end statement
.loc(240, 165)
// 3. apply the drag function - note, we are still chaining - which is optional, of course
// just do not pass in the bounds to be able to drag anywhere
.drag(bounds);
// DRAG A COPY
// this is tricky to do as we need to drag what we pressed
// so we leave a clone under what we press
// and then when we drop, we switch the clone and the original
// STEPS - DRAG A COPY
// 1. make object
// 2. drag the object
// 3. on a mousedown, create a copy that can be dragged in the future
// 4. put the copy under the object we are dragging
// 5. on a pressup, swap the two objects
// 1. make object
const circle = new Circle(50, "#acd241", "#50c4b7", 10)
.loc(710, 210)
// 2. drag object
.drag();
// 3. on mousedown copy and set copy to drag
let current;
circle.on("mousedown", function(e) {
current = e.target;
current.copy = current.clone()
.addTo()
.drag();
// 4. set the current back to the top
current.top();
S.update();
});
// 5. on a pressup, swap the two objects
circle.on("pressup", function(e) {
current = e.currentTarget;
// swap positions
swapProperties("x", current, current.copy);
swapProperties("y", current, current.copy);
S.update();
});
// EXTRA
// you can adjust the cursor and the drag cursor to any css cursor style
// drag(container) will automatically drag any object inside the container that is pressed
// unless you set the currentTarget parameter to true
// by default you can't swipe on something that you can drag - but you can change this
// the bounding rectangle is relative to the stage
// you can set this to a rectangle within the object's container with localBounds to true
// by default drag() sets the object to be at the top of its container - you can change this
// draw the dashed bounds + half border + rectangle width and height
const border = new Rectangle(bounds.width+10+rectangle.width, bounds.height+10+rectangle.height, null, "#666", 1, 0, null, true)
.loc(bounds.x-5, bounds.y-5);
// Note: AS OF ZIM CAT - can now set drag boundary to a rectangle or the stage and it will keep object WITHIN this boundary automatically
// make the labels
const dragBounds = new Label({text:"drag with bounds", color:"#999"})
.centerReg()
.loc(rectangle)
.mov(rectangle.width/2, rectangle.height/2+120);
const dragCopy = new Label({text:"drag copy", color:"#999"})
.centerReg()
.loc(circle)
.mov(0, 120);
const docItems = "Frame,Circle,Rectangle,Label,drag,noDrag,pos,mov,addTo,centerReg,Boundary,swapProperties,zog";
makeFooter(S, W, H, null, docItems); // ZIM BITS footer - you will not need this
} // end of ready
</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body>
<!-- canvas with id="myCanvas" is made by zim Frame -->
</body>
</html>