JQuery Droppable does not accept draggable items-CodePudding

I am working on a HTML/jQuery DnD project. The images that I want to be draggable are so but the targets don't accept them. Even though droppable, the td elements that should accept the images don't accept anything.

What version of jQuery and jQueryUI are the least ones I should use? What else have I forgotten/done wrong? TIA for your answers.

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

CodePudding user response：

You should change the droppable attribute to data-droppable since the former is an invalid attribute. After you make that change, change the $.droppable selector to: .target[data-droppable="true"]. I also did this with the draggable attributes, but these were not the immediate issue, because you never utilized them.

Furthermore, I used versions 3.3.1 and 1.12.1 of jQuery and jQuery UI respectively. These are the latest available versions via cdnjs.

Note: I also created a jQuery plugin function called $.fn.centerOnDrop that centers the draggable item in the droppable zone.

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

CodePudding user response：

Consider the following example.

$(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 will apply Styling to the element. It can often be best to strip this before appending it to the Drop target.

In regards to the Demo, please see https://jqueryui.com/droppable/#accepted-elements You can see the versions used here. I would advise using more modern version of jQuery; yet this would be as low as I would suggest.