JQuery Droppable 不接受可拖动的项目

Question

我正在做一个 HTML/jQuery DnD 项目。我想要拖动的图像是这样，但目标不接受它们。尽管可以放置，但应该接受图像的 td 元素不接受任何东西。

哪个版本的 jQuery 和 jQueryUI 是我应该使用的最少版本？我 forgotten/done 还有什么错？ TIA 为您解答。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Tierspiel</title>
  <meta name="author" content="Freya Bremer">
  <style>
    body {
      display: block;
    }
    
    .target {
      width: 110px;
      height: 110px;
      border-width: 1px;
      border-color: black;
      border-style: solid;
      margin-right: 1em;
      margin-top: 1em;
      empty-cells: show;
      border-collapse: separate;
      border-spacing: 1 em;
    }
    
    table {
      align: center;
    }
    
    td img {
      width: 110px;
      height: 110px;
      border-width: 1px;
      border-color: black;
      border-style: solid;
      margin-right: 1em;
      margin-top: 1em;
    }
    
    tr {
      margin-right: 1em;
      margin-top: 1em;
    }
    
    th {
      color: #b00000;
      font-weight: bold;
      margin-right: 1em;
      margin-top: 1em;
      text-align: center;
    }
    
    [draggable=true] {
      cursor: grab;
    }
  </style>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
  <script type="text/javascript">
    init();

    function init() {
      $(".tier").draggable();

      console.log("Tier draggable");

      $(".target").droppable({
        accept: ".tier",
        tolerance: "touch",
        drop: checkclass
      });
      console.log("Target droppable");

    }

    function checkclass() {

      console.log("Checkclass läuft");
    }
  </script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
  <p>Liebe Schüler,<br> Ihr kennt Euch ja schon mit Tieren aus und habt auch schon gelernt, daß man Tiere in Klassen einteilt.<br> Damit kommen wir zu einem kleinen Spiel.<br> Unten seht Ihr Bilder von einigen Tieren und auch die Klassen, zu denen diese
    Tiere gehören.<br> Ihr bitte nehmt die Bilder der Tiere in die Hand und zieht sie in die Klasse, <br> wo Ihr wißt, daß sie dazu gehören.<br> Es gibt für Säugetiere, Amphibien und Reptilien jeweils 3 dazu passende Tiere.<br> Ihr schafft das sicher
    ganz alleine, aber wenn etwas zu schwierig ist helfen Euch Eure Lehrer sicher gerne.<br> Fangen wir also an...
  </p>
  <p>Hier kommen unsere Tiere:</p>
  <table align="center">
    <tr align="center">
      <td><img src="tier1.jpg" draggable="true" class="tier"></td>
      <td><img src="tier2.jpg" draggable="true" class="tier"></td>
      <td><img src="tier3.jpg" draggable="true" class="tier"></td>
      <tr align="center">
        <td><img src="tier4.jpg" draggable="true" class="tier"></td>
        <td><img src="tier5.jpg" draggable="true" class="tier"></td>
        <td><img src="tier6.jpg" draggable="true" class="tier"></td>
      </tr>
      <tr align="center">
        <td><img src="tier7.jpg" draggable="true" class="tier"></td>
        <td><img src="tier8.jpg" draggable="true" class="tier"></td>
        <td><img src="tier9.jpg" draggable="true" class="tier"></td>
      </tr>
  </table>

  <p>Die Klassen brauchen wir auch noch. Hier sind sie.</p>

  <table align="center">
    <tr align="center">
      <th align="center">Säugetiere</th>
      <th align="center">Amphibien</th>
      <th align="center">Reptilien</th>
    </tr>
    <tr>
      <td class="target" droppable="true"></td>
      <td class="target" droppable="true"></td>
      <td class="target" droppable="true"></td>
    </tr>
    <tr>
      <td class="target"></td>
      <td class="target"></td>
      <td class="target"></td>
    </tr>
    <tr>
      <td class="target"></td>
      <td class="target"></td>
      <td class="target"></td>
    </tr>
  </table>
</body>
</html>

Answer 1

您应该将 droppable 属性更改为 data-droppable，因为前者是无效属性。进行更改后，将 $.droppable 选择器更改为：.target[data-droppable="true"]。我也用 draggable 属性做了这个，但这些不是直接的问题，因为你从未使用过它们。

此外，我分别使用了jQuery和jQueryUI的3.3.1和1.12.1版本。这些是通过 cdnjs 提供的最新版本。

注意：我还创建了一个名为 $.fn.centerOnDrop 的 jQuery 插件函数，它将可拖动项目置于可放置区域的中心。

(function($) {
  $.fn.centerOnDrop = function(ui) {
    ui.draggable.position({
      my: 'center',
      at: 'center',
      of: this,
      using: function(pos) {
        $(this).animate(pos, 200, 'linear');
      }
    });
  };
})(jQuery);

init();

function init() {
  $('.tier[data-draggable="true"]').draggable();
  console.log('Tier draggable');
  $('.target[data-droppable="true"]').droppable({
    accept: '.tier',
    tolerance: 'touch',
    drop: checkClass
  });
  console.log('Target droppable');
}

function checkClass(event, ui) {
  console.log('checkClass is running');
  $(this).centerOnDrop(ui);
}

body {
  display: block;
  color: #000000;
  background: #FFFFFF;
}

a,
a:visited,
a:active {
  color: #FF0000;
}

.target {
  width: 110px;
  height: 110px;
  border-width: 1px;
  border-color: black;
  border-style: solid;
  margin-right: 1em;
  margin-top: 1em;
  empty-cells: show;
  border-collapse: separate;
  border-spacing: 1 em;
}

table {
  align: center;
}

td img {
  width: 110px;
  height: 110px;
  border-width: 1px;
  border-color: black;
  border-style: solid;
  margin-right: 1em;
  margin-top: 1em;
}

tr {
  margin-right: 1em;
  margin-top: 1em;
}

th {
  color: #b00000;
  font-weight: bold;
  margin-right: 1em;
  margin-top: 1em;
  text-align: center;
}

[draggable=true] {
  cursor: grab;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<p>Liebe Schüler,<br> Ihr kennt Euch ja schon mit Tieren aus und habt auch schon gelernt, daß man Tiere in Klassen einteilt.<br> Damit kommen wir zu einem kleinen Spiel.<br> Unten seht Ihr Bilder von einigen Tieren und auch die Klassen, zu denen diese Tiere
  gehören.
  <br> Ihr bitte nehmt die Bilder der Tiere in die Hand und zieht sie in die Klasse, <br> wo Ihr wißt, daß sie dazu gehören.<br> Es gibt für Säugetiere, Amphibien und Reptilien jeweils 3 dazu passende Tiere.<br> Ihr schafft das sicher ganz alleine, aber
  wenn etwas zu schwierig ist helfen Euch Eure Lehrer sicher gerne.<br> Fangen wir also an...
</p>
<p>Hier kommen unsere Tiere:</p>
<table align="center">
  <tr align="center">
    <td><img src="https://via.placeholder.com/150?text=Tier+1" data-draggable="true" class="tier"></td>
    <td><img src="https://via.placeholder.com/150?text=Tier+2" data-draggable="true" class="tier"></td>
    <td><img src="https://via.placeholder.com/150?text=Tier+3" data-draggable="true" class="tier"></td>
  </tr>
  <tr align="center">
    <td><img src="https://via.placeholder.com/150?text=Tier+4" data-draggable="true" class="tier"></td>
    <td><img src="https://via.placeholder.com/150?text=Tier+5" data-draggable="true" class="tier"></td>
    <td><img src="https://via.placeholder.com/150?text=Tier+6" data-draggable="true" class="tier"></td>
  </tr>
  <tr align="center">
    <td><img src="https://via.placeholder.com/150?text=Tier+7" data-draggable="true" class="tier"></td>
    <td><img src="https://via.placeholder.com/150?text=Tier+8" data-draggable="true" class="tier"></td>
    <td><img src="https://via.placeholder.com/150?text=Tier+9" data-draggable="true" class="tier"></td>
  </tr>
</table>

<p>Die Klassen brauchen wir auch noch. Hier sind sie.</p>

<table align="center">
  <tr align="center">
    <th align="center">Mammals</th>
    <th align="center">Amphibians</th>
    <th align="center">Reptiles</th>
  </tr>
  <tr>
    <td class="target" data-droppable="true"></td>
    <td class="target" data-droppable="true"></td>
    <td class="target" data-droppable="true"></td>
  </tr>
  <tr>
    <td class="target"></td>
    <td class="target"></td>
    <td class="target"></td>
  </tr>
  <tr>
    <td class="target"></td>
    <td class="target"></td>
    <td class="target"></td>
  </tr>
</table>

Answer 2

考虑以下示例。

$(function() {
  $(".tier").draggable({
    cursor: "grab"
  });
  $(".target.droppable").droppable({
    accept: ".tier",
    tolerance: "touch",
    drop: function(evt, ui) {
      ui.draggable.attr("style", "").appendTo(this);
    }
  });
});

body {
  display: block;
  color: #000;
  background-color: #fff;
}

.target {
  width: 110px;
  height: 110px;
  border-width: 1px;
  border-color: black;
  border-style: solid;
  margin-right: 1em;
  margin-top: 1em;
  empty-cells: show;
  border-collapse: separate;
  border-spacing: 1 em;
}

table {
  align: center;
}

td img {
  width: 110px;
  height: 110px;
  border-width: 1px;
  border-color: black;
  border-style: solid;
  margin-right: 1em;
  margin-top: 1em;
}

tr {
  margin-right: 1em;
  margin-top: 1em;
}

th {
  color: #b00000;
  font-weight: bold;
  margin-right: 1em;
  margin-top: 1em;
  text-align: center;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>

<p>Liebe Schüler,<br> Ihr kennt Euch ja schon mit Tieren aus und habt auch schon gelernt, daß man Tiere in Klassen einteilt.<br> Damit kommen wir zu einem kleinen Spiel.<br> Unten seht Ihr Bilder von einigen Tieren und auch die Klassen, zu denen diese Tiere
  gehören.
  <br> Ihr bitte nehmt die Bilder der Tiere in die Hand und zieht sie in die Klasse, <br> wo Ihr wißt, daß sie dazu gehören.<br> Es gibt für Säugetiere, Amphibien und Reptilien jeweils 3 dazu passende Tiere.<br> Ihr schafft das sicher ganz alleine, aber
  wenn etwas zu schwierig ist helfen Euch Eure Lehrer sicher gerne.<br> Fangen wir also an...
</p>
<p>Hier kommen unsere Tiere:</p>
<table>
  <tr>
    <td><img src="tier1.jpg" class="tier"></td>
    <td><img src="tier2.jpg" class="tier"></td>
    <td><img src="tier3.jpg" class="tier"></td>
  </tr>
  <tr>
    <td><img src="tier4.jpg" class="tier"></td>
    <td><img src="tier5.jpg" class="tier"></td>
    <td><img src="tier6.jpg" class="tier"></td>
  </tr>
  <tr>
    <td><img src="tier7.jpg" class="tier"></td>
    <td><img src="tier8.jpg" class="tier"></td>
    <td><img src="tier9.jpg" class="tier"></td>
  </tr>
</table>
<p>Die Klassen brauchen wir auch noch. Hier sind sie.</p>
<table align="center">
  <tr align="center">
    <th align="center">Säugetiere</th>
    <th align="center">Amphibien</th>
    <th align="center">Reptilien</th>
  </tr>
  <tr>
    <td class="target droppable"></td>
    <td class="target droppable"></td>
    <td class="target droppable"></td>
  </tr>
  <tr>
    <td class="target"></td>
    <td class="target"></td>
    <td class="target"></td>
  </tr>
  <tr>
    <td class="target"></td>
    <td class="target"></td>
    <td class="target"></td>
  </tr>
</table>

Draggable 会将样式应用于元素。通常最好在将其附加到放置目标之前将其剥离。

关于Demo，请看https://jqueryui.com/droppable/#accepted-elements这里可以看到使用的版本。我建议使用更现代的 jQuery 版本；但这会像我建议的那样低。

JQuery Droppable 不接受可拖动的项目

JQuery Droppable does not accept draggable items

javascript

html

jquery

jquery-ui

jquery-ui-droppable