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

回答

相關問題