Javascript 使用拖放工具填充空格；在HTML中删除jQuery

我正在实现一个填空拖放功能

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

已完成的事情

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

2）如果我将答案从填充框拖到空框，则上一个值应为空完成

现在问题来了

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

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

以下是我迄今为止所做的工作：

$（文档）.ready（函数（）{
var-arr；
$（“span”）。可拖放({
接受：“ul>li”，
课程：{
“ui可拖放悬停”：“ui状态悬停”
},
drop：函数（事件、用户界面）{
arr=[]；
var dragedElement=ui.draggable.text（）；
$（this.addClass（“ui状态突出显示”）；
$（this.html（dragedElement）；
$（'span'）。每个（函数（）{
arr.push（$（this.text（））；
});
//log（JSON.stringify（arr））；
var matched=arr.filter（（值）=>value==dragedElement）；
//log（JSON.stringify（匹配））；
$（'span'）。每个（函数（）{
如果（$（this）.text（）==匹配的[1]）{
$（this.addClass（'matched'）；
//setItem（'prevValue'，$（this.text（））；
$（'span.matched'）。文本（“”）；
$（this.removeClass（“ui状态突出显示”）；
$（this.removeClass（'matched'）；
}
});
$（this.html（dragedElement）；
$（this.addClass（“ui状态突出显示”）；
}
});
$（“ul>li”）。可拖动({
回复：“无效”
});
})

span{
宽度：100px；
显示：内联块；
高度：20px；
背景：#ffffff；
}
身体{
字体：13px Verdana；
}
保险商实验室{
列表样式：无；
填充：10px；
背景：黄色；
}
ulli{
显示：内联块；
利润率：0.10px；
填充：10px；
背景：rgb（0255213）；
}
p{
填充：10px；
背景：rgb（255,145,0）；
}

一个
两个
三
四
五
六

你好
你好
你好

我认为您不需要将填写的答案拖到另一个答案，因为用户有多个选项，可以将每个选项拖到答案上，当用户这样做时，答案会按最新选项修改。这是没有意义的用户拖动选项后下降回答。要执行此方案，您可以这样做：

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

})

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

})

编辑

如果要拖动答案，可以按如下方式执行：

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

})

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

})

$（文档）.ready（函数（）{
//此代码用于设置选项的顺序属性
var numberOfItems=$（“#选项”）.find（'li'）.length；
$.each（$（“#选项”）.find（'li'），函数（索引，项）{
$（项目）.attr（“订单”，索引）；
var removeBotton=$（''）；
removeBotton。单击（函数（）{
addToOlderPlace（$（this.parent（））；
});
$（项目）。追加（删除）；
});
$（“span”）。可拖放({
接受：“李”，
课程：{
“ui可拖放悬停”：“ui状态悬停”
},
drop：函数（事件、用户界面）{
//检查是否存在其他选项
if（$（this.find（'li'）。长度>0）
addToOlderPlace（$（this.find（'li'））；
$（this.addClass（“ui状态突出显示”）；
$（this.addClass（'matched'）；
$（ui.draggable.find（'i'）.attr（'style'，'）；
$（this.append（$（ui.draggable））；
}
});
$（“li”）。可拖动({
助手：“克隆”，
回复：“无效”
}); 
//此函数用于查找选项的旧位置
//此功能用于查找项目的旧位置
函数addToOlderPlace（$item）{
var indexItem=$item.attr（'order'）；
var itemList=$（“#选项”）.find（'li'）；
$item.find（'i'）.hide（）；
如果（indexItem==“0”）
美元（“#期权”）。预支（$项目）；
else if（Number（indexItem）==（Number（numberOfItems）-1））
$（“#选项”）。追加（$项）；
其他的
$（itemList[indexItem-1]）。在（$item）之后；
}
})

---

不久前，我做了一把小提琴来演示如何解决这类问题。在下拉/可下拉函数中包含

公差：intersect

，这是解决方案的关键

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

$（“#启动板”）.height（$（窗口）.height（）-20）；
var dropSpace=$（窗口）.width（）-$（“#启动板”）.width（）；
$（“#dropZone”）。宽度（dropSpace-70）；
$（“#dropZone”）.height（$（“#launchPad”）.height（））；
$（“.card”）.draggable({
附件：“#启动板”，
光标：“移动”，
助手：“克隆”，
回复：“无效”，
});
$（“#启动板”）。可拖放({
公差：“相交”，
接受：“.卡”，
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
drop：函数（事件、用户界面）{
$（“#启动板”）.append（$（ui.draggable））；
}
});
$（“.stackDrop1”）.dropable({
公差：“相交”，
接受：“.卡”，
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
drop:函数（事件，ui）{
$（this.append（$（ui.draggable））；
}
});
$（“.stackDrop2”）.dropable({
公差：“相交”，
接受：“.卡”，
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
drop:函数（事件，ui）{
$（this.append（$（ui.draggable））；
}
});
正文{
保证金：0；
}
#劳恩