美文网首页
socket中的随意拖拽

socket中的随意拖拽

作者: 我就是心虚 | 来源:发表于2017-11-02 10:41 被阅读0次

首先要配置node.js 的运行环境
1、在app.js中设置引入socket.io文件

var express = require('express');
var app = express();
var server = require('http').Server(app);(自己添加的)
var io = require('socket.io')(server);(自己添加的)

2、在HTML中定义一个块元素

【html代码片段】
<div id="box"></div>
【js代码片段】
var socket = io.connect('http://localhost:9000');
      var old = {};
      var oldX = box.offsetLeft;
      var oldY = box.offsetTop;
      box.onmousedown = function(e){
            var elX = e.clientX;
            var elY = e.clientY;
            oldX = box.offsetLeft;
            oldY = box.offsetTop;
            socket.emit("pos",{"elX":elX,"elY":elY});
            document.onmousemove = function(e){
                var l = e.clientX;
                var t = e.clientY;
                socket.emit("cur",{"l":l,"t":t})
            }
            document.onmouseup = function(){
                      document.onmousedown = null;
                      document.onmousemove = null;
              }
      }
      socket.on("position",function(data){
            old = data;
      })
      socket.on("curpos",function(data){
            box.style.left = oldX+data.l-old.elX + "px"
            box.style.top = oldY+data.t-old.elY + "px"
      })

3、在app.js中

io.on('connection', function (socket) {
    socket.on("pos",function(data){
      io.emit("position",data)
    });
    socket.on("cur",function(data){
      io.emit("curpos",data)
    })
});

server.listen(9000);

相关文章

  • socket中的随意拖拽

    首先要配置node.js 的运行环境1、在app.js中设置引入socket.io文件 2、在HTML中定义一个块...

  • 基于React 的组件可视化自由拖拽页面生成代码生成工具(开源)

    项目特点: 任意拖拽嵌套:通过组件预览面板拖拽组件,到设计面板实现任意嵌套,设计面板中的组件也可随意拖拽嵌套 实时...

  • uwsgi配置

    [uwsgi] # 这个配置随意 http = 9000 # 接受nginx转发的端口 socket = 127....

  • Java中Socket连接超时问题

    Java中Socket连接超时问题 在Socket编程中,客户端常使用Socket socket = new So...

  • JS+Vue实现元素拖拽

    背景 工作中遇到这样的一个需求:将页面侧边菜单拖拽到页面中间的画布中,然后在画布内可对此菜单进行随意移动。操作如下...

  • Notion 系列教程 04-记录编辑

    大家好,欢迎来到分享知识、持续提升的格物时间。Notion 最强大的就是页面中独立的块、丰富的内容类型、可随意拖拽...

  • 揭开socket的神秘面纱

    php中socket的应用 php中socket函数 函数名 描述 socket_accept() 接受一个Soc...

  • 如何达到这种随意拖拽的效果?

    演示: 体验地址:workmates.me 效果1:在网页上随意拖拽。效果2:鼠标经过时的描边。效果3:在图片之间...

  • 网页中拖拽图片的异常问题

    在网页中鼠标拖拽图片时,由于img元素对于拖拽时的默认行为,导致拖拽异常出现下图的中的虚影 在mousemove事...

  • 拖拽API

    实现拖拽效果 目前实现拖拽效果 HTML5拖拽 源元素事件例子 目标元素事件 从本地拖放图片到页面中 实现拖拽

网友评论

      本文标题:socket中的随意拖拽

      本文链接:https://www.haomeiwen.com/subject/yqreyxtx.html