js--实现鼠标拖动

<style>
	 .box {
        width: 200px;
        height: 200px;
        background-color: greenyellow;
        position: fixed;
        left: 0px;
        top: 0px;
    }
</style>
<body>
<div class="box" ></div>
<script>
    var div = document.querySelector('div');

    div.onmousedown = function (e) {
        e = e || window.event;
        var offsetX = e.offsetX;
        var offsetY = e.offsetY;
        document.onmousemove = function (ev) {
            ev = ev || window.event;
            var clientX=ev.clientX;
            var clientY=ev.clientY;
            div.style.left=clientX-offsetX+'px';
            div.style.top=clientY-offsetY+'px';
        }
    }
    div.onmouseup=function () {
        document.onmousemove=null;
    }
</script>
</body>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现鼠标拖动范围多选功能,可以借助 Element UI 提供的 el-table 组件提供的 selection-change 事件和 table 的 ref 属性进行操作。 以下是具体实现步骤: 1. 在 el-table 上添加 ref 属性,并绑定一个名称,方便在 JavaScript 中获取到它的实例。 2. 监听 el-table 的 selection-change 事件,该事件会在用户选择/取消选择表格中的行时触发。可以在事件处理程序中实现“范围多选”逻辑。 3. 在事件处理程序中,可以通过 $refs 来获取到 el-table 的实例,并调用实例的 toggleRowSelection 方法来实现行的选择/取消选择操作。该方法接受两个参数:当前行的数据和是否选中的标志。 4. 获取鼠标拖动的范围,遍历区域内所有的行,并通过 toggleRowSelection 方法来实现多选。 以下是一个简单的实现示例: ```html <template> <el-table :data="tableData" ref="table" @selection-change="handleSelectionChange" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp" > <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, address: '北京' }, { name: '李四', age: 20, address: '上海' }, { name: '王五', age: 22, address: '广州' }, { name: '赵六', age: 24, address: '深圳' } ], isDragging: false, startRowIndex: -1, endRowIndex: -1 } }, methods: { handleSelectionChange(rows) { console.log(rows) }, handleMouseDown(event) { const table = this.$refs.table const cell = event.target.closest('td') if (cell) { const rowIndex = cell.parentNode.rowIndex - 1 if (event.ctrlKey) { // 如果按下了 Ctrl 键,则不会清除之前选中的行,仅仅添加新的选择 this.isDragging = true } else { // 如果没有按下 Ctrl 键,则清空之前选中的行,只保留当前选择的行 table.clearSelection() table.toggleRowSelection(this.tableData[rowIndex], true) } this.startRowIndex = rowIndex this.endRowIndex = rowIndex } }, handleMouseMove(event) { if (this.isDragging) { const table = this.$refs.table const cell = event.target.closest('td') if (cell) { const rowIndex = cell.parentNode.rowIndex - 1 this.endRowIndex = rowIndex const start = Math.min(this.startRowIndex, this.endRowIndex) const end = Math.max(this.startRowIndex, this.endRowIndex) for (let i = start; i <= end; i++) { table.toggleRowSelection(this.tableData[i], true) } } } }, handleMouseUp() { this.isDragging = false } } } </script> ``` 在上面的示例代码中,我们通过添加 @mousedown、@mousemove 和 @mouseup 事件来实现鼠标拖动范围多选功能。当用户在表格中按下鼠标左键时,会触发 @mousedown 事件,我们在事件处理程序中记录开始的行索引,并判断是否按下了 Ctrl 键,如果按下了 Ctrl 键,则不清除之前选中的行,仅仅添加新的选择。 当用户移动鼠标时,会触发 @mousemove 事件,在事件处理程序中记录结束的行索引,然后计算要选中的行范围,并遍历区域内所有的行,通过 toggleRowSelection 方法来实现多选。 当用户松开鼠标时,会触发 @mouseup 事件,我们在事件处理程序中标记鼠标不再处于拖动状态。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值