jQuery拖放 - 将位置保存到MySQL数据库中

Question

jQuery拖放 - 将位置保存到MySQL数据库中

phpjquerydrag-and-drop

3

我一直在创建一个关于织物不同位置的小地图。我的目标是确保我可以将1、2、3和4（人）拖到一个位置（如生产主管），并将DIV的位置保存到MySQL数据库中。我想要一个全局地图，这样每个访问此页面的人都能看到相同的内容。

我为每个人（1、2、3和4）创建了不同的DIV，它们已经在数据库中。

我现在卡住了…有人能帮帮我吗？

Fiddle: https://jsfiddle.net/fj1zgw2o/ 数据库连接和显示来自数据库的人：

function choosePerson() {
$servername = "";
$username = "";
$password = "";
$dbname = "";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT id, name, image, position FROM Persons";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
        echo '<div class="boxPersons posLeft" id="'. $row['id'] .'">'. $row['id'] .'</div>';
    }
} else {
    echo "0 results";
}
}

- nhatimme

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Icewine · Accepted Answer

// Move the box into the corresponding id.
// When you load your boxPersons have each 
// person an id column that matches what position they will be in.
$(".boxPersons").each(function(e){
  var target = $(this).attr("data-id");
  $("#"+target).append($(this));
});

$(".boxPersons").draggable({
  revert: 'invalid',
  containment: '.box',
  cursor: 'move'
});

$(".openSpots, .box-persons").droppable({
  accept: ".boxPersons",
  drop: function(event, ui) {
    var droppable = $(this);
    var draggable = ui.draggable;
    // Move draggable into droppable
    draggable.appendTo(droppable);
    draggable.css({
      top: '0px',
      left: '0px'
    });
  }
});

.box-content {
  display: flex;
}

.toPlan {
  width: 10%;
}

.overviewPlanning {
  flex: 1;
}

.box-persons {
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #d8d8d8;
}

.boxPersons {
  width: 60px;
  height: 72px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  z-index: 99;
  float: left;
  background: #888;
}

.posLeft {
  float: left;
}

.openSpots {
  width: 60px;
  height: 72px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  border: 0.5px dashed #000000;
  border-radius: 4px;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<header>
  Header
</header>

<div class="box">
  <div class="box-content">
    <div class="toPlan">
      <div class="productionLeader">
        <strong>Production Leader</strong>
        <div id="Leader" class="openSpots" id="openSpots">

        </div>
        <strong>Free</strong>
        <div id="Free" class="openSpots positionFree">

        </div>
        <strong>Ill</strong>
        <div id="Ill" class="openSpots positionIll">

        </div>
        <strong>Otherwise</strong>
        <div id="Otherwise" class="openSpots positionOtherwise">

        </div>
      </div>
    </div>
    <div class="overviewPlanning">
      Fabric map
    </div>
  </div>
  <div class="box-persons">
    Available collegues (to drag and drop into a spot)<br>When you load the data into this box change the id to match what was saved. You can use AJAX to keep everything synced.<br>
    <div class="boxPersons" data-id='Free'>bob</div>
    <div class="boxPersons" data-id='Ill'>marry</div>
    <div class="boxPersons" data-id=''>mark</div>
  </div>
</div>

<footer>
  Footer
</footer>