Question

使用“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.

现在我想知道的是，将droppable部分中的cloned div放到其他客户端的最简单方法。目标是使页面上的所有连接用户实时查看已删除的克隆。我一直在寻找一个例子来了解如何制作这个，在整个互联网上发现没什么可用的，除了这个Socket.IO and Complex JSON with Node.js, jQuery，所以我知道可以实时移动div，但是它是有可能实时克隆？在某些我认为我需要保存已删除克隆的位置，如drikk0，在示例链接到这里。所以为了缩短它，我想要的是人们拖放一个实时将被所有其他连接用户看到的克隆。但我的问题是我无法通过jquery和socket.io的组合以最好的方式弄清楚如何做到这一点。

提前致谢。

Answer 1

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

经过一些研究和工作，我想出了这个非常简单的解决方案，可以获得单个丢弃克隆的个人位置。现在我需要了解的是每次克隆被丢弃（进入droppable部分）到Mysqli数据库（或类似的东西）时我如何发送这个位置。这样我就可以保存更改并实时显示给所有连接的用户。在这里你可以看到我到目前为止所拥有的。

＆＃13;

$(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);
        }
    });
});

＆＃13;

*{
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;
}

＆＃13;

<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>

＆＃13;

提前致谢！

draggable和droppable jquery socket.io

1 个答案: