Giter Club home page Giter Club logo

next-draggable's Introduction

next-draggable

let @spritejs/next can draggable,让 sprite 对象拥有 draggable 的能力

运行 demo

npm install

npm start

通过浏览器访问可以查看具体 demo

next-draggable

安装 next-draggable 依赖

  npm install next-draggable --save

作为 spritejs 插件使用

  // draggable与droppable方法注册到Node上
  import { install } from 'next-draggable'
  install(spritejs);
  

  let group = new Group();
  group.draggable();
  // group.draggable(false); group.draggable({destroy:true}) 取消注册drag

  group.droppable()//注册drop事件

  // group.droppable(false) ;group.droppable({destroy:true}) 取消注册drop

  group.addEventListener('drag', (evt) => {
    console.log('drag')
  });

  group.addEventListener('drop', (evt) => {
    console.log('drop')
  });

  group.addEventListener('dragenter', (evt) => {
    console.log('dragenter')
  });

  group.addEventListener('dragleave', (evt) => {
    console.log('dragleave')
  });

  group.addEventListener('dragover', (evt) => {
    console.log('dragover')
  });

  let sprite = new Sprite();
  //表示在 [0,0] 与 [300,300] 这两点矩形之间拖动 [xmin,ymin,xmax,ymax],不设置表示不控制拖动范围
  sprite.draggable({dragRect:[0,0,300,300]})

  // 取消设置dragRect方法
  //sprite.draggable({dragRect:[]})

  //表示拖动的范围大于坐标[0,0]
  //sprite.draggable({dragRect:[0,0]});

  /**拖动过程中,有三个事件 dragstart、drag、dragend**/
  sprite.addEventListener('dragstart',function(event){
    console.log('dragstart');
  });

  sprite.addEventListener('drag',function(event){
    console.log('drag');
  });

  sprite.addEventListener('dragend',function(event){
    console.log('dragend');
  });


  //取消元素拖动
  sprite.draggable(false);

作为方法使用

  import { draggable, droppable } from 'next-draggable'

  

  let group = draggable(new Group());

  // draggable(group,false); draggable(group,{destroy,true}) 取消注册drag

  droppable(group) //注册drop事件

  // droppable(group,false) ;droppable(group,{destroy:true}) 取消注册drop

  group.addEventListener('drag', (evt) => {
    console.log('drag')
  });

  group.addEventListener('drop', (evt) => {
    console.log('drop')
  });

  group.addEventListener('dragenter', (evt) => {
    console.log('dragenter')
  });

  group.addEventListener('dragleave', (evt) => {
    console.log('dragleave')
  });

  group.addEventListener('dragover', (evt) => {
    console.log('dragover')
  });

  let sprite = draggable(new Sprite());

  //表示在 [0,0] 与 [300,300] 这两点矩形之间拖动 [xmin,ymin,xmax,ymax],不设置表示不控制拖动范围
  draggable(sprite,{dragRect:[0,0,300,300]});
  //draggable(sprite,{dragRect:[]});

  //表示拖动的范围大于坐标[0,0]
  //draggable(sprite,{dragRect:[0,0]});

  /**拖动过程中,有三个事件 dragstart、drag、dragend**/
  sprite.addEventListener('dragstart',function(event){
    console.log('dragstart');
  });

  sprite.addEventListener('drag',function(event){
    console.log('drag');
  });

  sprite.addEventListener('dragend',function(event){
    console.log('dragend');
  });


  //取消元素拖动
  draggable(sprite,false);

事件列表:

事件 描述 其它
dragstart 开始拖动对象
drag 正在拖动对象
dragend 停止拖动对象
dragover 一个 draggable 对象在另一个 droppable 对象上拖动
dragenter 一个 draggable 对象在进入一个 droppable 对象上 draggable 进入 droppable 判断点为 draggable 对象最小矩形的中心
dragleave 一个 draggable 对象离开一个 droppable 对象上
drop 一个 draggable 对象放在一个 droppable 对象上

next-draggable's People

Contributors

akira-cn avatar dependabot[bot] avatar yaotaiyang avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

next-draggable's Issues

README里提示使用 on 添加事件监听,报错 .on is not a function

文档中的 demo 用法都是使用了 on 去添加事件监听,实际使用时报错 .on is not a function

group.on('drag', (evt) => {
    console.log('drag')
  });

看了下examples/demo.js,这里用的都是 addEventlistener

group.addEventListener('drag', evt => {
  console.log('drag')
})

所以是不是文档写错了?

怎么在vue中用这个插件

<template>
    <div id="stage"></div>
</template>

<script>
import spritejs, {Scene,Path,Group} from 'spritejs'
import {draggable,install} from 'next-draggable'

install(spritejs)


export default {
    data(){
        return{
            width:0,
            height:0,
        }
    },
    mounted(){
        const container = document.getElementById('stage')
        const _that = this
        this.width = document.getElementById('stage').clientWidth
        this.height = document.getElementById('stage').clientHeight
        const scene = new Scene({
            container,
            width:_that.width,
            height:_that.height,
        })
        const layer = scene.layer();
        let g = new Group({
            pos:[_that.width/2,_that.height/2],
            scale:[1,-1]
        })
        g.draggable()
        layer.append(g)

        let path = new Path();
        path.draggable()

        path.attr({
            d:'M10,10 L100,100 L10,100',
            anchor: [0, 0],
            pos: [0,0],
            strokeColor:'red',
            name:'path',
        });

        g.append(path);
    },
    methods:{

    }
}
</script>
<style scoped>
    #stage{
        width: 100vw;
        height: 100vh;
        background: #212121;
        margin: 0;

    }
</style>

我这样使用会报错,请问是我写法有问题吗

drag有没有拖动过程的坐标

目前只有_dragStartPoint,drag方法都没有拖动过程坐标,dragend也没有拖动结束坐标
如果需要记录坐标就无法实现

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.