可拖放的 jquery socket.io
Posted
技术标签:
【中文标题】可拖放的 jquery socket.io【英文标题】：draggable and droppable jquery socket.io 【发布时间】：2017-11-06 06:32:04 【问题描述】：使用 "Jquery" 我一直在尝试制作一个简单的拖放系统。我想要制作的“Jquery”拖放系统运行良好。它是使用可拖放功能创建的。就像这里显示的那样。
$(function()
$( ".this-div" ).draggable(
grid: [ 5, 5 ],
appendTo: '#droppable',
containment: $('#droppable'),
cursor: 'hand',
tolerance: 'fit',
revertDuration: 100,
revert: 'invalid',
helper: 'clone'
);
$( "#droppable" ).droppable(
accept: ".this-div",
drop: function( event, ui )
ui.helper.clone().appendTo('#droppable');
);
);*
margin: 0;
padding: 0;
html,body
width: 100%;
height: 100%;
#droppable
width: 80%;
height: 100%;
float: left;
border: 1px solid black;
.this-div
width: 100px;
text-align: center;
padding: 2px;
height: 100px;
background-color: #444;
color: #fff;
font-family: sans-serif;
aside
float: left;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Draggable and droppable - Jquery and Socket.io</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section id="droppable"></section>
<aside><div class="this-div">Test</div></aside>
</body>
</html>结果可以在这里看到。 click here to see picture.
现在我想知道的是，将可放置部分中的克隆 div 的放置发送到其他客户端的最简单方法。目标是让页面上的所有连接用户实时看到删除的克隆。我一直在寻找一个例子来了解如何制作这个，在整个互联网上并没有发现任何可用的东西，除了这个Socket.IO and Complex JSON with Node.js, jQuery，所以我知道可以实时移动一个 div，但是有可能实时克隆？在某些方面，我认为我需要像 drikk0 那样在示例在此处链接中保存放置的克隆的位置。所以简而言之，我想要的是人们拖放一个克隆，所有其他连接的用户都可以实时看到它。但我的问题是，我不知道如何结合 jquery 和 socket.io 以最好的方式做到这一点。
提前致谢。
【问题讨论】：
欢迎来到 Stack Overflow。所以这个问题会产生一些小问题。这是可能的，正如您所说，您需要将位置存储在某个地方（很可能是数据库），以允许其他客户端收集该数据。您只想存储结果吗？我建议查看 jquery、ajax、php 和 mysql。 非常感谢，是的，我想要的是存储的结果，然后如果可能的话由所有客户端（稍后在选择的用户组上）接收，这样他们就可以看到存储的结果。 （结果我想到了 html 和 css - 标记，当然还有位置）。选择的用户组可以通过连接字符串（如 agar.io）或登录来创建，但这部分现在并不重要。现在重要的部分是进行拖放，以向所有客户端显示更改。并且可以在每次将 div 拖放到 droppable 时实际克隆它。谢谢:) 您能提供到目前为止您已经尝试过的情况吗？您使用的是什么类型的环境？数据库？ 基本上，使用 AJAX 的演示者客户端可以更新数据库中的表（使用服务器端脚本）。然后查看器使用 AJAX 检查更新。如果找到，更新查看者的视图。 非常感谢您的帮助，正如您所提到的，我认为我将采用 jquery、ajax、php 和 mysql 的方式。所以，是的，如果我遇到任何问题，那么我会为你提供我迄今为止一直在尝试的东西，如果你觉得可以吗？我明天要开始制定解决方案:) 【参考方案1】：（这不是最终的解决方案，只是正确的一步）
经过一些研究和工作，我想出了一个非常简单的解决方案，用于在单个放置的克隆上获取个人位置。现在我需要了解的是，每次将克隆（放入可放置部分）放置到 Mysqli 数据库（或类似的东西）时，我如何发送这个位置。这样我就可以保存更改并将其实时显示给所有连接的用户。在这里你可以看到我到目前为止所拥有的。
$(function()
$(".this-div").draggable(
grid: [ 5, 5 ],
appendTo: '#droppable',
containment: $('#droppable'),
cursor: 'hand',
tolerance: 'fit',
revertDuration: 100,
revert: 'invalid',
helper: 'clone'
);
$("#droppable").droppable(
accept: '.this-div',
drop: function(event, ui)
ui.helper.clone().appendTo('#droppable');
leftPosition = ui.offset.left - $(this).offset().left;
topPosition = ui.offset.top - $(this).offset().top;
//Debug current dropped position
$("#top").val(topPosition);
$("#left").val(leftPosition);
);
);*
margin: 0;
padding: 0;
html,body
width: 100%;
height: 100%;
#droppable
width: 80%;
height: 100%;
float: left;
border: 1px solid black;
.this-div
width: 100px;
text-align: center;
padding: 2px;
height: 100px;
background-color: #444;
color: #fff;
font-family: sans-serif;
aside
float: left;
<html>
<head>
<title>Pass Jquery Drop To MYSQLI DB</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Jquery Implimentation -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<input id="top" value="Top Position">
<input id="left" value="Left Position">
<section id="droppable"></section>
<aside>
<div class="this-div">Test</div>
</aside>
</body>
</html>提前致谢！
【讨论】：
以上是关于可拖放的 jquery socket.io的主要内容，如果未能解决你的问题，请参考以下文章