jquery UI 中的拖放问题
Drag and drop issue in jquery UI
我正在使用 jqueryUI 创建测验类型的问题。
当我将正确答案(第一个)拖放到可放置区域时,它应该变成绿色。
其余选项,它应该变成红色。
现在它不能正常转动..任何人都可以帮我解决这个问题吗?
我的作品:
https://codepen.io/vimalraj86/pen/poJyOQr
这是我用过的代码片段。
$( function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
}
});
} );
$( function() {
$( "#draggable1" ).draggable();
$( "#draggable2" ).draggable();
$( "#draggable3" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-red" )
}
});
} );
你需要一个条件来帮助决定。您可以使用 if
语句或其他方式来确定应添加哪个 class。
$(function() {
$("div[id^='draggable']").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
if (ui.draggable.text().trim() == "C") {
$(this).addClass("ui-state-green");
} else {
$(this).addClass("ui-state-red")
}
}
});
});
#draggable,
#draggable1,
#draggable2,
#draggable3 {
width: 100px;
height: 100px;
padding: 0.5em;
margin: 10px 10px 10px 0;
border: 1px solid #ccc;
background: #fff;
float: left;
}
hr {
float: left;
width: 100%;
background: #ccc;
}
#droppable {
width: 400px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
border: 1px solid #ccc;
background: #fff;
}
#droppable.ui-state-green {
background: green;
}
#droppable.ui-state-red {
background: #ff0000;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="droppable" class="ui-widget-header"></div>
<hr/>
<div id="draggable" class="ui-widget-content">
<p>A</p>
</div>
<div id="draggable1" class="ui-widget-content">
<p>B</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>C</p>
</div>
<div id="draggable3" class="ui-widget-content">
<p>D</p>
</div>
<button id="reset">reset</button>
我正在使用 jqueryUI 创建测验类型的问题。 当我将正确答案(第一个)拖放到可放置区域时,它应该变成绿色。 其余选项,它应该变成红色。 现在它不能正常转动..任何人都可以帮我解决这个问题吗?
我的作品:
https://codepen.io/vimalraj86/pen/poJyOQr
这是我用过的代码片段。
$( function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
}
});
} );
$( function() {
$( "#draggable1" ).draggable();
$( "#draggable2" ).draggable();
$( "#draggable3" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-red" )
}
});
} );
你需要一个条件来帮助决定。您可以使用 if
语句或其他方式来确定应添加哪个 class。
$(function() {
$("div[id^='draggable']").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
if (ui.draggable.text().trim() == "C") {
$(this).addClass("ui-state-green");
} else {
$(this).addClass("ui-state-red")
}
}
});
});
#draggable,
#draggable1,
#draggable2,
#draggable3 {
width: 100px;
height: 100px;
padding: 0.5em;
margin: 10px 10px 10px 0;
border: 1px solid #ccc;
background: #fff;
float: left;
}
hr {
float: left;
width: 100%;
background: #ccc;
}
#droppable {
width: 400px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
border: 1px solid #ccc;
background: #fff;
}
#droppable.ui-state-green {
background: green;
}
#droppable.ui-state-red {
background: #ff0000;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="droppable" class="ui-widget-header"></div>
<hr/>
<div id="draggable" class="ui-widget-content">
<p>A</p>
</div>
<div id="draggable1" class="ui-widget-content">
<p>B</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>C</p>
</div>
<div id="draggable3" class="ui-widget-content">
<p>D</p>
</div>
<button id="reset">reset</button>