jquery - Uncaught TypeError: $ (...). Draggable не является функцией

Question

Я работал над проектом перетаскивания, но он продолжает выдавать ошибку:

Uncaught TypeError: $(...).draggable is not a function

Я пытался загрузить разные диски, но он все еще не работает. Все мои модули импортированы правильно и в правильном порядке.

$(".productItem").draggable({
  helper: 'clone',
  handle: "productItem"
});

$("#basket").droppable({
  accept: ".productItem",
  drop: function(event, ui) {
    $("<div></div>")
      .html(ui.draggable.text())
      .appendTo($(this));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<h2>Products</h2>
<div id="list">
  <div class="productItem">product 1</div>
  <div class="productItem">product 2</div>
  <div class="productItem">product 3</div>
</div>

<hr />

<h2>Basket</h2>
<div id="basket">

</div>

Answer 1

Если вы уже правильно добавили библиотеку JQuery & JqueryUI, вы должны сделать что-то вроде этого:

Вам нужно подождать, пока DOM будет готов применить ваш код, или просто поместить перетаскиваемую часть после элемент:

HTML:

<div class="draggable" style="background:red;border: 1px solid black; width: 50px; height: 50px; position: absolute; top: 0px; left: 0px;">asdasd</div>

JS:

$(function () {
     $(".draggable").draggable();
});

<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>
<script>
  $(function () {
    $(".draggable").draggable();
  });
</script>
<div class="draggable" style="background:orange;border: 1px solid black; padding: 10px 20px; position: absolute; cursor:move;border-radius: 10px">
  DRAG ME
</div>

---

Так что в вашем случае это будет так:

$(function() {
  $("#basket").sortable({
    revert: true
  });
  $(".list-item").draggable({
    connectToSortable: "#basket",
    helper: "clone",
    revert: "invalid"
  });
  $("ul, li").disableSelection();
});

body {
  color: orange;
}

.box {
  float: left;
}

ul {
  background: #fff;
  width: 200px;
  height:200px;
  padding: 0;
  color:#343434;
}

li {
  background: #efefef;
  list-style: none;
  padding: 5px;
  cursor: move;
}
li:hover {
  background: orange;
}
#basket {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="box">
  <h2>List</h2>
  <ul id="list">
    <li class="list-item" class="ui-state-highlight">Product 1</li>
    <li class="list-item" class="ui-state-highlight">Product 2</li>
    <li class="list-item" class="ui-state-highlight">Product 3</li>
    <li class="list-item" class="ui-state-highlight">Product 4</li>
    <li class="list-item" class="ui-state-highlight">Product 5</li>
    <li class="list-item" class="ui-state-highlight">Product 6</li>
  </ul>
</div>
<div class="box">
  <h2>Basket</h2>

  <ul id="basket">
  </ul>

</div>

Answer 2

Вам нужно дождаться загрузки DOM, прежде чем объявить элемент перетаскиваемым. Я добавил CSS, чтобы мы могли проверить здесь.

Проверьте ниже:

$(function() {
  $(".productItem").draggable({
    helper: 'clone',
    containment: 'window',
    appendTo: '#basket',
    revert: false,
    scroll: false,
    start: function( event, ui ) {
        // console.log("starting drag");
    },
    stop: function( event, ui ) {
        // console.log("stopped drag");
    }
  });


  $("#basket").droppable({
      accept: ".productItem",
      drop: function(event, ui){
          // console.log("dropped item in basket");
          $(this).append(ui.draggable[0]);
      }
  });
  
});

#list {
  position: relative;
  float: left;
  width: 100%;
  background-color:#f00;
  margin-bottom: 10px;
}

.productItem {
  position: relative;
  float:left;
  width: 100px; 
  height: 25px; 
  padding: 0.5em; 
  cursor: pointer;
  background-color: #fff;
  padding: 0 !important;
  border:1px solid #000;
  margin-right: 10px;
  text-align:center;
}

#basket {
  position:relative;
  float:left;
  width:100%;
  height: 25px;
  background-color:#09f;
}

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

<h2>Products</h2>
<div id="list">
<div class="productItem">product 1</div>
<div class="productItem">product 2</div>
<div class="productItem">product 3</div>
</div>

 <hr />

 <h2>Basket</h2>
 <div id="basket"></div>