Mit der Verwendung von "Jquery" Ich habe versucht, ein einfaches Drag-and-Drop-System zu machen. Die "Jquery" Drag & Drop-System möchte ich sehr gut funktioniert. Es wird mit einer ziehbaren und absetzbaren Funktion erstellt. Wie hier gezeigt.ziehbare und dropable jquery socket.io
$(function() {
$(".this-div").draggable({
grid: [ 5, 5 ],
\t appendTo: '#droppable',
containment: $('#droppable'),
\t cursor: 'hand',
tolerance: 'fit',
\t revertDuration: 100,
\t 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>Das Ergebnis kann hier als Bild sehen. click here to see picture.
Nun, was ich wissen möchte, ist der einfachste Weg, um den Tropfen eines geklonten Div in der abwerfbaren Abschnitt zu anderen Clients zu emittieren. Das Ziel besteht darin, alle verbundenen Benutzer auf der Seite den gelöschten Klon in Echtzeit sehen zu lassen. Ich habe nach einem Beispiel gesucht, um eine Vorstellung davon zu bekommen, wie man das macht, über das Internet und nichts brauchbares gefunden, abgesehen davon Socket.IO and Complex JSON with Node.js, jQuery, also weiß ich, dass es möglich ist, ein div in Echtzeit zu bewegen, aber ist es möglich in zu klonen Echtzeit? In einigen, wie ich denke, ich muss die Position des fallen gelassenen Klons speichern, wie drikk0 tut, in der Probe , die hier verbunden ist. Um es kurz zu machen, was ich möchte, ist, dass Leute einen Klon ziehen und fallen lassen, der in Echtzeit von allen anderen verbundenen Benutzern gesehen wird. Aber mein Problem ist, dass ich mit einer Kombination aus jquery und socket.io nicht herausfinden kann, wie man das am besten macht.
Vielen Dank im Voraus.
Willkommen bei Stack Overflow. Dieses Problem würde also einige kleine Probleme verursachen. Es ist möglich und wie Sie gesagt haben, müssen Sie die Position irgendwo speichern (am wahrscheinlichsten eine Datenbank), die anderen Clients erlauben kann, diese Daten zu sammeln. Möchten Sie nur das Ergebnis gespeichert? Ich würde vorschlagen, jquery, ajax, php und mysql zu betrachten. – Twisty
Vielen Dank, ja, was ich will, ist das Ergebnis gespeichert und dann wenn möglich von allen Clients (später eine ausgewählte Benutzergruppe) erhalten, so dass sie das gespeicherte Ergebnis sehen können. (durch Ergebnis denke ich an die HTML und CSS - Markup, und natürlich Position). Die gewählte Benutzergruppe könnte durch eine Verbindungszeichenfolge (wie agar.io) oder durch eine Anmeldung hergestellt werden, aber dieser Teil ist momentan nicht wichtig. Der wichtige Teil ist jetzt das Ziehen und Ablegen, um Änderungen für alle Clients zu zeigen. Und es ist möglich, das Div jedes Mal zu klonen, wenn es per Drag & Drop in das Droppable gezogen wird. Danke :) – Fredy
Können Sie angeben, dass Sie bisher versucht haben? Welche Art von Umgebung verwenden Sie? Datenbank? – Twisty