Html 如何比较if-else循环中的id和变量，并在jqueryui中执行它

html5代码：

<h1 id="draggable" class="ui-widget-content" > Header1 </h1>
<p id="drag1" class="ui-widget-content"> Paragraph </p> 
<p id="drag2" class="ui-widget-content"> text box </p>
<p id="drag3" class="ui-widget-content" > radio button </p>

<div id="droppable"></div>

Header1
段落
文本框
单选按钮

jquery代码：

$(function() {
$(".ui-widget-content").click(function() {
  var clickedId= $(this).attr("id");
  alert(clickedId);
});

$( "#draggable" ).draggable({ appendTo: "body", helper: "clone"});
$( "#drag1" ).draggable({ appendTo: "body", helper: "clone"});
$( "#drag2" ).draggable({ appendTo: "body", helper: "clone"});
$( "#drag3" ).draggable({ appendTo: "body", helper: "clone"});


$( "#droppable" ).droppable({
drop: function( event, ui ) {

if(clickedId == draggable){
 $( "<textarea></textarea>" ).text( ui.draggable.text() ).appendTo( this );
 $("textarea").draggable();
}
else if(clickedId==drag1){
  $( "<textarea></textarea>" ).text( ui.draggable.text() ).appendTo( this );
  $("textarea").draggable();
}
else if(clickedId==drag2){
 $( "<input></input>" ).text( ui.draggable.text() ).appendTo( this );
 $("input").draggable();
}
else if(clickedId==drag3){
 $( "<button></button>" ).text( ui.draggable.text() ).appendTo( this );
 $("buton").draggable();
}
}
});
});

$（函数（）{
$（“.ui小部件内容”）。单击（函数（）{
var clickedId=$（this.attr（“id”）；
警报（单击EDID）；
});
$（“#draggable”）.draggable（{appendTo:“body”，helper:“clone”}）；
$（“#drag1”）.draggable（{appendTo:“body”，helper:“clone”}）；
$（“#drag2”）.draggable（{appendTo:“body”，helper:“clone”}）；
$（“#drag3”）.draggable（{appendTo:“body”，helper:“clone”}）；
$（“#可拖放”）。可拖放({
drop：函数（事件、用户界面）{
如果（单击EDID==可拖动）{
$（“”）.text（ui.draggable.text（））.appendTo（this）；
$（“textarea”）.draggable（）；
}
否则如果（单击EDID==drag1）{
$（“”）.text（ui.draggable.text（））.appendTo（this）；
$（“textarea”）.draggable（）；
}
否则如果（单击EDID==drag2）{
$（“”）.text（ui.draggable.text（））.appendTo（this）；
$（“输入”）.draggable（）；
}
否则如果（单击EDID==drag3）{
$（“”）.text（ui.draggable.text（））.appendTo（this）；
$（“buton”）.draggable（）；
}
}
});
});

---

一旦html元素被拖放到拖放区域，它应该执行适当的if-else循环。问题是，拖放后，它不会通过比较clickedId中存储的id来执行if-else循环。

测试clickedId时，应该会得到字符串，所以在值周围加引号：

if(clickedId == 'draggable'){

---

您的代码中有两个问题

一个建议的

if（单击edid==“可拖动”）{

您需要将

clickedId

设置为全局变量，以便使用

$（“.ui小部件内容”）。单击（函数（）{

单击edid=$（this.attr（“id”）；}）；

还有，这是你的答案。 建议：

我不知道它是否声明在您的需求中使用“在执行

拖动

事件之前单击”，但您可以在

拖放

可拖放事件中获得拖动元素id

drop: function( event, ui ) {
    var dragId = ui.draggable.prop("id");

---

缩进是一件好事。我第一次贴出这个错误。谢谢你的更正！谢谢你的回复，但它不起作用。它不会像代码中那样将删除的元素更改为文本区域或按钮。你给出的建议正是我想要的！