Javascript: неожиданный токен [в строке 92

У меня проблемы с моей 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>

Когда я исправил фрагмент (не заключайте CSS/JS в теги), у вас другая ошибка.

— 19.03.2019 03:48

javascript html json

19.03.2019 03:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, вы просто немного переусердствовали с некоторым редактированием... Несколько опечаток, и я думаю, что вы хороши:

Отсутствует $ в строке "(".leftImg").draggable({"
В строке var randomNumber = Math.floor(Math.random() * pictureIds.length) необходимо изменить pictureIds.length на pictureIds, поскольку это целое число, а не массив.
Ваш цикл находится в переменной i, но вы увеличили значение pictureId вместо i.
Часть, где вы делаете table.row.add, имеет Res[идентификатор изображения], и я не уверен, что должно быть на месте, если идентификатор изображения, но Res[идентификатор изображения] недействителен. Я прокомментировал это в приведенном ниже коде, но то, что я отредактировал ниже, можно перетащить в поле.

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

      }

    })

  });
});

Да, это сработало. Спасибо за вашу быструю помощь. Я признателен за это.

— 20.03.2019 13:23

19.03.2019 05:13