将对象的 HTML 内容复制到变量中

Question

我正在一个网站上制作一个拖放界面，其中包含三个可拖放对象和四个可拖放对象。我希望每个可拖动的内容都显示在放置它的任何可放置内容中。

如您所见，我正在尝试从 droppable 创建一个名为 dropped1 的变量，但我是 jQuery 新手，迷路了。

<div class="demo">
  <div id="snaptarget1" class="ui-widget-header">
    <p>Div 1</p> Correct Answer is 1
  </div>
  <div id="snaptarget2" class="ui-widget-header">
    <p>Div 2</p> Correct Answer is 2
  </div>
  <div id="snaptarget3" class="ui-widget-header">
    <p>Div 3</p> Correct Answer is 3
  </div>
  <br clear="both" />

  <div id="draggable1" class="draggable1 ui-widget-content">
    <p>Answer 1</p>
  </div>
  <div id="draggable2" class="draggable1 ui-widget-content">
    <p>Answer 2</p>
  </div>
  <div id="draggable3" class="draggable1 ui-widget-content">
    <p>Answer 3</p>
  </div>
</div>

$("#snaptarget1").droppable({
  drop: function(event, ui) {
    var dropped1 = ui.prop('innerHTML');
    $('#drag1results').css('background-color', 'yellow')
    $(this)
      .droppable('disable')
      .removeClass("ui-widget-header")
      .addClass("ui-state-highlight")
      .find("p")
      .html("Dropped with " + dropped1 + "!")
    ui.draggable("option", "disabled", true);
  }
});

Answer 1

ui.draggable.text() 可能就是你要找的东西：

（注意：我保留了您的大部分代码，只是添加了droppable/draggable 类，尽管我通常建议查询data- 属性）：

$('.draggable').draggable({revert: 'valid'});

$('.droppable').droppable({
  drop: function(event, ui) {  
    var dropped1 = ui.draggable.text().trim();
    $('#drag1results').css('background-color', 'yellow');
    
    $(this)
      .droppable('disable')
      .removeClass("ui-widget-header")
      .addClass("ui-state-highlight")
      .find("p")
      .html("Dropped with " + dropped1 + "!");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />

<div class="demo">
  <div id="snaptarget1" class="droppable ui-widget-header">
    <p>Div 1</p> Correct Answer is 1
  </div>
  <div id="snaptarget2" class="droppable ui-widget-header">
    <p>Div 2</p> Correct Answer is 2
  </div>
  <div id="snaptarget3" class="droppable ui-widget-header">
    <p>Div 3</p> Correct Answer is 3
  </div>
  <br clear="both" />

  <div id="draggable1" class="draggable ui-widget-content">
    <p>Answer 1</p>
  </div>
  <div id="draggable2" class="draggable ui-widget-content">
    <p>Answer 2</p>
  </div>
  <div id="draggable3" class="draggable ui-widget-content">
    <p>Answer 3</p>
  </div>
</div>

Answer 2

感谢您的宝贵时间。

所以当您说查询数据时。和“data-div”标签一样吗？

我发布的代码示例是一个精简版本，其中我已经设置了 data-div 标签，但不确定这是否可行？

如果是这样，显示内容的方式是什么？

谢谢