不用startDrag和stopDrag的对象拖动

package {
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.ui.MouseCursor;
    import flash.ui.Mouse;
 
    public class MouseMoveDrag extends Sprite {
 
        private var offsetX:Number;
        private var offsetY:Number;
        private var arrBalls:Array;
        private var _draggedBall:Ball;
 
 
        public function MouseMoveDrag():void {
 
            arrBalls=new Array(7);
 
            for (var i:uint=0; i<arrBalls.length; i++) {
                arrBalls[i]=new Ball(20+Math.random()*30,Math.random()*0xffffff);
                arrBalls[i].x=stage.stageWidth*Math.random();
                arrBalls[i].y=stage.stageHeight*Math.random();
                arrBalls[i].addEventListener(MouseEvent.MOUSE_DOWN, MouseDownHandler);
                arrBalls[i].addEventListener(MouseEvent.MOUSE_UP, MouseUpHandler);
                arrBalls[i].addEventListener(MouseEvent.MOUSE_OVER,MouseOverHandler);
                arrBalls[i].addEventListener(MouseEvent.MOUSE_OUT,MouseOutHandler);
                addChild(arrBalls[i]);
            }
 
        }
 
        function MouseOverHandler(e:MouseEvent):void {
            Mouse.cursor=MouseCursor.BUTTON;
        }
 
        function MouseOutHandler(e:MouseEvent):void {
            Mouse.cursor=MouseCursor.AUTO;          
        }
 
        //开始移动
        function MouseDownHandler(e:MouseEvent):void {
            offsetX=e.localX;
            offsetY=e.localY;           
            _draggedBall = e.target as Ball;
            stage.addEventListener(MouseEvent.MOUSE_MOVE, stageMouseMoveHandler);
        }
 
        //停止拖动
        function MouseUpHandler(e:MouseEvent):void {
            _draggedBall = null;
            //拖动完成后,移除舞台的Mouse_Move监听
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, stageMouseMoveHandler);
        }
 
 
        function stageMouseMoveHandler(e:MouseEvent):void {
            //trace(e.target);
            var _ball:Ball=e.target as Ball;
            if (_ball!=null) {
                //设置新的坐标
                _ball.x=mouseX-offsetX;
                _ball.y=mouseY-offsetY;
            }
            else {
                //trace("您拖得太快了!" + _draggedBall.toString());
                if (_draggedBall!=null){
                    _draggedBall.x=mouseX-offsetX;
                    _draggedBall.y=mouseY-offsetY;
                }
            }
        }
 
    }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现 div 横向拖动并互换位置,可以使用 Vue.js 和一些 JavaScript 库来实现。 首先,你需要在 Vue.js 创建一个拖动事件。你可以使用 `v-on:mousemove` 来监听鼠标移动事件,并使用 `v-on:mousedown` 来监听鼠标按下事件。在鼠标按下事件,你需要记录鼠标的当前位置。 接下来,在鼠标移动事件,你需要计算鼠标的偏移量,并将偏移量添加到 div 的 left 样式。这将使 div 沿着 x 轴移动。 当鼠标释放时,你需要计算 div 的位置,并使用 JavaScript 库来实现 div 位置的互换。你可以使用 Sortable.js 或者 Draggable.js 这样的库来实现拖拽和位置交换。 最后,你需要将这些逻辑封装在一个 Vue.js 组件,以便在应用程序使用。以下是一个简单的示例: ```html <template> <div class="container"> <div v-for="(item, index) in items" :key="index" :class="{ active: activeIndex === index }" v-bind:style="{ left: item.left + 'px' }" v-on:mousedown="startDrag(index, $event)"> {{ item.text }} </div> </div> </template> <script> import Sortable from 'sortablejs'; export default { data() { return { items: [ { text: 'Item 1', left: 0 }, { text: 'Item 2', left: 100 }, { text: 'Item 3', left: 200 }, { text: 'Item 4', left: 300 }, ], activeIndex: null, startX: 0, }; }, mounted() { const container = this.$el.querySelector('.container'); Sortable.create(container, { animation: 150, swapThreshold: 0.5, onSwap: (evt) => { const { oldIndex, newIndex } = evt; const item = this.items.splice(oldIndex, 1)[0]; this.items.splice(newIndex, 0, item); }, }); }, methods: { startDrag(index, event) { this.activeIndex = index; this.startX = event.clientX; window.addEventListener('mousemove', this.drag); window.addEventListener('mouseup', this.stopDrag); }, drag(event) { const deltaX = event.clientX - this.startX; this.items[this.activeIndex].left += deltaX; this.startX = event.clientX; }, stopDrag() { window.removeEventListener('mousemove', this.drag); window.removeEventListener('mouseup', this.stopDrag); this.activeIndex = null; }, }, }; </script> <style> .container { display: flex; position: relative; width: 100%; height: 100px; background-color: #f5f5f5; } .container > div { position: absolute; top: 0; height: 100%; width: 100px; background-color: #fff; border: 1px solid #ccc; display: flex; justify-content: center; align-items: center; cursor: move; } .container > div.active { z-index: 1; } </style> ``` 在这个示例,我们创建了一个包含多个 div 的容器,并使用 Vue.js 的数据绑定将每个 div 的位置绑定到数据模型。当用户按下鼠标并开始拖动 div 时,我们记录 div 的当前位置,并在每次移动时计算偏移量。当用户释放鼠标时,我们使用 Sortable.js 库来实现 div 的位置交换。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值