javascript - 在 HTML 中使用拖放 jQuery 实现填空

Question

我正在实现填空拖放功能。

Codepen Link

这里我有上面的答案列表，即一、二、三等，下面的空白区域将用于填充这些答案。

完成的事情

1) 从答案列表中拖动选项并填写空白框。 完成

2) 如果我将一个答案从一个填满的框中拖到一个空框中，之前的值应该是空白的。 完成

问题来了

1) 如果我将一个答案从一个填充框拖到另一个填充框，那么如何切换两个框的值和位置。想过可以获取前一个和当前的位置，然后交换位置，但不知道如何实现。

2) 如果我将一个值从答案列表拖到一个已填充的框中，那么如何交换它们

这是我到目前为止所做的:

$(document).ready(function() {
  var arr;
  $("span").droppable({
    accept: "ul > li",
    classes: {
      "ui-droppable-hover": "ui-state-hover"
    },
    drop: function(event, ui) {
      arr = [];
      var dragedElement = ui.draggable.text();
      $(this).addClass("ui-state-highlight");
      $(this).html(dragedElement);
      $('span').each(function() {
        arr.push($(this).text());
      });
      //console.log(JSON.stringify(arr));

      var matched = arr.filter((value) => value == dragedElement);
      //console.log(JSON.stringify(matched));

      $('span').each(function() {
        if ($(this).text() == matched[1]) {
          $(this).addClass('matched');
          //localStorage.setItem('prevValue', $(this).text());
          $('span.matched').text('');
          $(this).removeClass("ui-state-highlight");
          $(this).removeClass('matched');
        }
      });

      $(this).html(dragedElement);
      $(this).addClass("ui-state-highlight");

    }
  });

  $("ul > li").draggable({
    revert: "invalid"
  });
})

span {
  width: 100px;
  display: inline-block;
  height: 20px;
  background: #ffffff;
}

body {
  font: 13px Verdana;
}

ul {
  list-style: none;
  padding: 10px;
  background: yellow;
}

ul li {
  display: inline-block;
  margin: 0 10px;
  padding: 10px;
  background: rgb(0, 255, 213);
}

p {
  padding: 10px;
  background: rgb(255, 145, 0);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
</ul>
<p>hello
  <span></span>hello
  <span></span>hello
  <span></span>
</p>

Answer 1

我认为您不需要将填充的答案拖到另一个答案，因为用户有多个选项并且可以拖动每个选项来回答，当用户这样做时，答案会根据最新选项进行修改。用户在放下答案后拖动选项是没有意义的。要执行此场景，您可以这样做:

$(document).ready(function() {
  $("span").droppable({
    accept: "ul > li",
    classes: {
      "ui-droppable-hover": "ui-state-hover"
    },
    drop: function(event, ui) {
      var dragedElement = ui.draggable.text();
      $(this).addClass("ui-state-highlight");
      $(this).html(dragedElement);
      $(this).addClass('matched');  
    }
  });

  $("ul li").draggable({
    helper:"clone",
    revert: "invalid"
  });

})

Online demo (jsFiddle)

编辑

如果你想拖动答案，你可以这样做:

$(document).ready(function() {
  // This code used for set order attribute for options
var numberOfItems = $("#options").find('li').length;
$.each($("#options").find('li'), function(index, item) {
    $(item).attr("order", index);
    var removeBotton = $('<i class="fa fa-times" style="display:none"></i>');
    removeBotton.click(function(){
        addToOlderPlace($(this).parent());        
      });
    $(item).append(removeBotton);

});

  $("span").droppable({
    accept: "li",
    classes: {
      "ui-droppable-hover": "ui-state-hover"
    },
    drop: function(event, ui) {
    // Check for existing another option
    if($(this).find('li').length > 0)
    addToOlderPlace($(this).find('li'));

      $(this).addClass("ui-state-highlight");
      $(this).addClass('matched');  

      $(ui.draggable).find('i').attr("style","");
      $(this).append($(ui.draggable));    

    }
  });

  $("li").draggable({
    helper:"clone",
    revert: "invalid"
  }); 


  // This function used for find old place of option
  // This function used for find old place of item


  function addToOlderPlace($item) {
        var indexItem = $item.attr('order');
        var itemList = $("#options").find('li');
        $item.find('i').hide();         

        if (indexItem === "0")
            $("#options").prepend($item);
        else if (Number(indexItem) === (Number(numberOfItems)-1))        
               $("#options").append($item);                       
        else
            $(itemList[indexItem - 1]).after($item);
    }

})

Online demo (jsFiddle)