Question

我正在实施 填空“ 拖放丢弃功能。

Codepen Link

在这里，我有一个上面的答案列表，即 一，二，三等 以及下面的空白区域，这些答案将被填充。

已完成的事情

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

2）如果我将答案从已填充的框拖到空框中，则之前的值应为空白。的完成

现在问题

1）如果我将答案从填充框拖到另一个填充框中，那么如何切换两个框的值和位置。我认为我们可以获得前一个和当前一个的位置，然后交换位置，但不知道如何实现它。

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

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

＆＃13;

$(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"
  });
})

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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)

Answer 2

前段时间我做了一个小提琴来演示如何解决这种类型的问题。在drop / droppable函数中包含tolerance:intersect是解决方案的关键。

在这个片段中，我没有模仿你的代码，但提供了我的小提琴示例，以便您可以看到如何将此解决方案应用于您自己的代码。

＆＃13;

$("#launchPad").height($(window).height() - 20);
var dropSpace = $(window).width() - $("#launchPad").width();
$("#dropZone").width(dropSpace - 70);
$("#dropZone").height($("#launchPad").height());

$(".card").draggable({
    appendTo: "#launchPad",
    cursor: "move",
    helper: 'clone',
    revert: "invalid",

});

$("#launchPad").droppable({
    tolerance: "intersect",
    accept: ".card",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        $("#launchPad").append($(ui.draggable));
    }
});

$(".stackDrop1").droppable({
    tolerance: "intersect",
    accept: ".card",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        $(this).append($(ui.draggable));
    }
});

$(".stackDrop2").droppable({
    tolerance: "intersect",
    accept: ".card",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        $(this).append($(ui.draggable));
    }
});

＆＃13;

body {
  margin: 0;
}

#launchPad {
  width: 200px;
  float: left;
  border: 1px solid #eaeaea;
  background-color: #f5f5f5;
}

#dropZone {
  float: right;
  border: 1px solid #eaeaea;
  background-color: #ffffcc;
}

.card {
  width: 150px;
  padding: 5px 10px;
  margin: 5px;
  border: 1px solid #ccc;
  background-color: #eaeaea;
}

.stack {
  width: 180px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  margin: 20px;
}

.stackHdr {
  background-color: #eaeaea;
  border: 1px solid #fff;
  padding: 5px
}

.stackDrop1,
.stackDrop2 {
  min-height: 100px;
  padding: 15px;
}

＆＃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>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />


<div id="launchPad">
  <div class="card draggable">
    apple
  </div>
  <div class="card draggable">
    orange
  </div>
  <div class="card draggable">
    banana
  </div>
  <div class="card draggable">
    car
  </div>
  <div class="card draggable">
    bus
  </div>
</div>

<div id="dropZone">
  <div class="stack">
    <div class="stackHdr">
      Drop here
    </div>
    <div class="stackDrop1 droppable">

    </div>
  </div>

  <div class="stack">
    <div class="stackHdr">
      Or here
    </div>
    <div class="stackDrop2 droppable">

    </div>
  </div>
</div>

＆＃13;

这是fiddle link也是

希望这有帮助

实施使用drag＆amp; amp填充空白在HTML中删除jQuery

2 个答案: