Skip to content

Instantly share code, notes, and snippets.

@Luke-SF

Luke-SF/Dragdrop.htm

Created February 1, 2013 05:57
Show Gist options
  • Save Luke-SF/4689585 to your computer and use it in GitHub Desktop.
Save Luke-SF/4689585 to your computer and use it in GitHub Desktop.
Download ZIP
Sample working drag-drop with multiline, even in Firefox 18.
Raw
Dragdrop.htm
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<!-- old <script src="https://local-py.googlecode.com/svn-history/r7/trunk/js/kinetic-v3.10.1.js"></script>-->
<script src="https://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.1.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rectX = stage.getWidth() / 2 - 50;
var rectY = stage.getHeight() / 2 - 25;
var box = new Kinetic.Text({
fontSize: 18,
x: 20,
y: 20,
fill:'#555',
text: "test\nlines",
textFill: 'blue',
fontFamily: 'Courier New',
detectionType: 'path',
draggable: true
});
// add cursor styling
box.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
box.on('mouseout', function() {
document.body.style.cursor = 'default';
});
layer.add(box);
stage.add(layer);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment