draggable和droppable jquery socket.io

随着使用“jquery”我一直在尝试做一个简单的拖放系统。我想使作品很好地拖拽系统的“jquery”。它使用可拖动和可拖放功能创建。如这里所示。draggable和droppable 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>

结果可以在这里看到的图片。 click here to see picture.

现在我想知道的是将droppart部分中的克隆div放到其他客户端的最简单方法。目标是让页面上的所有连接用户实时查看丢弃的克隆。我一直在寻找一个例子，以了解如何做到这一点，所有在互联网上，发现什么都没有用，除了这Socket.IO and Complex JSON with Node.js, jQuery，所以我知道有可能实时移动一个div，但是有可能克隆即时的？在一些我认为我需要保存像drikk0那样丢弃的克隆的位置的示例中，在示例中链接到这里。因此，为了简短起见，我想要的是人们拖放一个实时的克隆，并将被所有其他连接的用户看到。但我的问题是，我无法弄清楚如何以最好的方式做到这一点，结合使用jquery和socket.io。

在此先感谢。

来源

2017-06-05 Fredy

欢迎来到Stack Overflow。所以这个问题会造成一些小问题。这是可能的，如您所说，您需要将位置存储在某个位置（很可能是数据库），以便其他客户端可以收集该数据。你只想存储结果吗？我会建议看看jQuery，Ajax，PHP和MySQL。 – Twisty

非常感谢，是的，我想要的是存储的结果，然后如果可能的话，所有客户端（稍后在选择的用户组）上接收，以便他们可以看到存储的结果。（通过结果我想到的HTML和CSS标记，以及ofcourse位置）。选择的用户组可以由连接字符串（如agar.io）或登录名创建，但此部分现在并不重要。现在最重要的部分就是拖拽，以便现在显示所有客户端的更改。并且可以在每次将它拖放到可丢弃对象时真正克隆div。谢谢:) – Fredy

你可以提供你迄今为止尝试过吗？你使用什么类型的环境？数据库？ – Twisty

（这不是最终的解决方案，但只是在正确的道路一步）

一些研究和下班后，我拿出上获得的单下降克隆个别位置这个非常简单的解决方案。现在我需要了解的是，每次克隆被删除（进入可丢弃部分）到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>

提前感谢！

来源

2017-06-07 17:40:52 Fredy

draggable和droppable jquery socket.io

回答

相关问题