Копирование HTML-содержимого объекта в переменную - PullRequest
Новая
       45

Копирование HTML-содержимого объекта в переменную

0 голосов
/ 14 октября 2018

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

Как вы можете видеть, я пытаюсь создать переменную с именем dropped1 из файла droppable, но я новичок в 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);
  }
});

Ответы [ 2 ]

0 голосов
/ 14 октября 2018

Спасибо за ваше время.

Так что, когда вы говорите, запрос данных.Это то же самое, что теги «data-div»?

Пример кода, который я публикую, представляет собой урезанную версию, в которой я уже установил теги div, но не уверен, сработает ли это?

Каким был бы способ отображения содержания этого, если это так?

Спасибо

0 голосов
/ 14 октября 2018

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>
...