Question

我的html页面出现问题。在控制台上，它显示出由于意外令牌，第92行出现1个错误。我试图将页面上的图像拖到指定的框。一旦拖动，它应该留在框中。当我单击图像时，我应该可以将其拖出框。我不确定我哪里出错了，但是在这一点上它完全无法正常工作。感谢所有帮助。

$(document).ready(function() {

  var pictureIds = 20;
  var Size = 400;
  var table = $('#results').DataTable();

  $.get("https://unsplash.it/list", function(Res) {
    for (var i = 0; i < pictureIds; pictureIds++) {
      var randomNumber = Math.floor(Math.random() * pictureIds.length)

      $('.left').append($("<img>", {
        src: "https://picsum.photos/" + Size + "/" + Size + "?image" + Res[randomNumber].id,
        id: randomNumber,
        class: "leftImg"
      }));

    }

    (".leftImg").draggable({
      revert: "invalid"
    });

    $("#right").droppable({
      accept: ".leftImg",
      drop: function(event, ui) {
        ui.draggable.attr("id"),
          $(ui.draggable).detach().css({
            top: 2,
            left: 0
          }).appendTo($(this));
        window.alert("Dropped image with an ID of " + ui.draggable.attr('id'));

        //Create rows
        var rowNode = table.row.add({
            Res[image id].id,
            Res[image id].filename,
            Res[image id].author,
            Res[image id].post_url
          }).draw()
          .node();

        table.row.add({
          Res[image id].id,
          Res[image id].filename,
          Res[image id].author,
          Res[image id].post_url
        }).draw();

        $(rowNode).addClass(ui.draggable.attr('id'));

      }

    })

  });
});

.left {
  padding: 20px;
  order: solid #000000 2px;
  height: 50%;
  width: 90%;
}

#right {
  width: 30%;
  border: solid #000000 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  float: right;
  min-height: 400px;
}

<html>

<head>

  <!-- head stuff goes here -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />


</head>

<body>

  <!-- HTML content goes here -->

  <div class="left">
    <img class="leftImg" src="https://source.unsplash.com/random/200x200" id="102" />

    <div id="right">

    </div>

  </div>

  <table id="results" style="width:100%">
    <thead>
      <tr>
        <th>id</th>
        <th>filename</th>
        <th>author</th>
        <th>url</th>
      </tr>
    </thead>
    <tbody>
    </tbody>

  </table>

</html>

Answer 1

我认为您对编辑有些狂热...一些错字，我认为您很好：

在“（“ .leftImg”）。draggable（{“
这行var randomNumber = Math.floor（Math.random（）* pictureIds.length）必须将pictureIds.length更改为pictureIds，因为它是一个int而不是数组。
您的循环位于变量i上，但是您增加了pictureId而不是i。
您正在执行table.row.add的部分具有Res [图像ID]，如果图像ID但Res [图像ID]无效，我不确定应该放置什么。我在下面的代码中对此进行了注释，但是我在下面的编辑内容可拖动到框中。

$(document).ready(function() {

  var pictureIds = 20;
  var Size = 400;
  var table = $('#results').DataTable();

  $.get("https://unsplash.it/list", function(Res) {
    for (var i = 0; i < pictureIds; i++) {
      var randomNumber = Math.floor(Math.random() * pictureIds);

      $('.left').append($("<img>", {
        src: "https://picsum.photos/" + Size + "/" + Size + "?image" + Res[randomNumber].id,
        id: randomNumber,
        class: "leftImg"
      }));

    }

    $(".leftImg").draggable({
      revert: "invalid"
    });

    $("#right").droppable({
      accept: ".leftImg",
      drop: function(event, ui) {
        ui.draggable.attr("id"),
          $(ui.draggable).detach().css({
            top: 2,
            left: 0
          }).appendTo($(this));
        window.alert("Dropped image with an ID of " + ui.draggable.attr('id'));

        //Create rows
        /*
        var rowNode = table.row.add({
            Res[randomNumber].id,
            Res[randomNumber].filename,
            Res[randomNumber].author,
            Res[randomNumber].post_url
          }).draw()
          .node();

        table.row.add({
          Res[randomNumber].id,
          Res[randomNumber].filename,
          Res[randomNumber].author,
          Res[randomNumber].post_url
        }).draw();
        */
        $(rowNode).addClass(ui.draggable.attr('id'));

      }

    })

  });
});

JavaScript：意外令牌[第92行

1 个答案: