Question

所以，总的来说我有一个单词库，我试图允许用户将任何单词拖到其他几个框中，除了我不允许在任何框中复制，包括如果一个单词是拖回了银行这个词。答：我正在尝试编辑文本，以便在将文本拖入其他框时将其缩小，如果将其拖回文字框，则再次放大。

并非所有这些都有效。

所以我开始了：

1）我需要准确地获取所有元素和列表的id和类。现在：如果我将一个列表项拖到另一个列表，我该如何访问它来自的上一个列表的id？我的ui.sender[0].id正在输出我的字词项的id，而不是它所属的上一个列表的id。

2）此外，如果列表中有多个项目，我该如何访问这些ID？我使用var element = $(this).sortable("toArray")并且没有正确访问它们;当我在每个列表中有多个项目时，它会显示为未定义，我通过element[0].id等进行测试。

这是我在JS中所拥有的一部分：

var origin = null;
$("#wordBank,.words").draggable({
  helper: "clone",
  connectToSortable: ".sort",
  start: function() {
    origin = $(this).parent()[0].id;
    }
});

$(".words,.sort").sortable({
  connectWith: "#wordBank,.sort",
  receive: function(event, ui) {
  
  
    ui.item.toggleClass("highlight");
    var currentListID = this.id; //where the item is dropped
    var originatedID = origin; //where item came from
    
    var itemContent = ui.item[0].innerHTML; //content in item
 
    var currentListLength = this.children.length;

  //alert("Ok");
  //alert("currentListID = " + currentListID);
  //alert("item content = " + itemContent);
  //alert("current list length = " + currentListLength);

  //Here I thought I could access all of the elements in a list if 
  //they had at least two items, but it's not working
  var element = $(this).sortable("toArray");
  alert("element[0] = " + element[0].id);

  
    
    
  }
  });
  $().disableSelection();

.border {
  border: 2px solid green;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="wordBank" class="bank1">
  <li id="word1" class="words">Word1</li>
  <li id="word2" class="words">Word2</li>
  <li id="word3" class="words">Word3</li>
  <li id="word4" class="words">Word4</li>
  <li id="word5" class="words">Word5</li>
</ul>

<div id="drop1" class="border sort">1. </div>
<div id="drop2" class="border sort">2. </div>
<div id="drop3" class="border sort">3. </div>
<div id="drop4" class="border sort">4. </div>

Answer 1

在尝试运行代码之前，有很多事情需要修复：

($this)需要更改为$(this)，在jQuery中使用$(selector)调用所有对象。
而不是使用alert()使用console.log()进行日志记录或尝试使用浏览器调试代码。
obj未在代码中定义，请在使用前检查它是否已正确定义。

要获取被拖动元素的源元素id，您可以使用 jQuery-ui draggable 的start事件来跟踪被拖动的元素\ n当拖动操作开始时，父id。

这是正确的代码：

var origin = null;
$("#wordBank,.words").draggable({
  helper: "clone",
  connectToSortable: ".sort",
  start: function() {
    origin = $(this).parent()[0].id;
  }
});

<强>演示：

这是您的代码的更新和修订版本，其中包含用于跟踪此id的正确代码：

＆＃13;

var origin = null;
$("#wordBank,.words").draggable({
  helper: "clone",
  connectToSortable: ".sort",
  start: function() {
    origin = $(this).parent()[0].id;
  }
});
$(".words,.sort").sortable({
  connectWith: "#wordBank,.sort",
  receive: function(event, ui) {

    ui.item.toggleClass("highlight");
    var currentListID = this.id;
    var originatedID = origin;
    var itemContent = ui.item[0].innerHTML;
    var currentListLength = this.children.length;

    console.log("Ok");
    console.log("currentListID = " + currentListID);
    console.log("originatedID = " + originatedID);
    console.log("item content = " + itemContent);
    console.log("current list length = " + currentListLength);

    var element = $(this).sortable("toArray");
    console.log("element[0] = " + element[0]);


    if (currentListID === "#wordBank") {

      console.log("removing list-inline-item on " + itemContent);
      ui.item[0].classList.remove("list-inline-item");
    } else if (!ui.item[0].classList.contains("list-inline-item")) {
      ui.item[0].classList.add("list-inline-item");
    }
    if (originatedID === "wordBank") {

      ui.item.css("font-size", "10px");
    } else if (currentListID === "wordBank") {
      ui.item.css("font-size", "20px");
      if (ui.item[0].classList.remove("list-inline-item"));
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul id="wordBank" class="bank1">
  <li id="word1" class="words">Word1</li>
  <li id="word2" class="words">Word2</li>
  <li id="word3" class="words">Word3</li>
  <li id="word4" class="words">Word4</li>
  <li id="word5" class="words">Word5</li>
</ul>

<div id="drop1" class="border sort">1. </div>
<div id="drop2" class="border sort">2. </div>
<div id="drop3" class="border sort">3. </div>
<div id="drop4" class="border sort">4. </div>

＆＃13;

获取可排序项目的列表ID？

1 个答案: