我已经在dom上加载了一个图像,我希望能够将该图像拖动到画布中并将其放入画布并从中创建一个kineticjs对象.
我不知道如何使图像可拖动,我不知道如何使画布对拖放已存在于dom上的事件做出反应.有人能告诉我怎么做吗？
大多数教程都展示了如何从画布或文件系统中拖放,我正在寻找如何从DOM拖动到画布.
背景资料：
我想要一个菜单系统或一堆缩略图,用户可以拖放到画布中以展开照片.
提前致谢！
解决方法
没问题！
1你必须使用html5中的“拖放”.教程：http://www.html5rocks.com/en/tutorials/dnd/basics/
2设置dom事件到图像：
- var dragSrcEl = null;
- //image
- document.getElementById("yoda").addEventListener('dragstart',function(e){
- dragSrcEl = this;
- });
3容器对象的事件：
- var con = stage.getContainer();
- con.addEventListener('dragover',function(e){
- e.preventDefault(); // !!important
- });
- //insert image to stage
- con.addEventListener('drop',function(e){
- var image = new Kinetic.Image({
- draggable : true
- });
- layer.add(image);
- imageObj = new Image();
- imageObj.src = dragSrcEl.src;
- imageObj.onload = function(){
- image.setImage(imageObj)
- layer.draw()
- };
- });
当然还有完整的例子：http://jsfiddle.net/lavrton/n4w44/
