如何在 if else 循环中比较 ids 和变量并在 jquery ui 中执行

Question

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>

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

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

Answer 1

在测试 clickedId 时，您应该会得到字符串，因此请用引号将值括起来：

if(clickedId == 'draggable'){

Answer 2

你的代码有两个问题，

建议一个 @jnmrobinson

if(clickedId == 'draggable'){
您需要将clickedId设置为全局变量，所以使用，

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

而且，这里是 working fiddle。

建议：

我不知道它是否声明在您的要求中执行 drag 事件之前使用点击，但您可以获得 拖动元素 ID 在 drop 可丢弃事件中，

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

如何在 if else 循环中比较 ids 和变量并在 jquery ui 中执行

how to compare ids and variable in if else loop and execute it in jquery ui

html

jquery-ui

而且，这里是 working fiddle。