HTML 代码在这里
<!doctype html>
<html>
<head>
<title>jQuery UI: alphabetmatcher</title>
<link href="css/normalize.css" rel="stylesheet">
<link href="matchalphabate.css" rel="stylesheet">
<!-- jQuery UI CSS -->
<link href="js/jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Drag and arrange alphabet</h1>
<div id="dragable">
<h3>Alphabate Table</h3>
<button class="b">I</button>
<button class="b">U</button>
<button class="b">I</button>
<button class="b">U</button>
<button class="b">I</button>
<button class="b">U</button>
<button class="b">I</button>
<button class="b">U</button>
<button class="b">I</button>
<button class="b">U</button>
<button class="b">I</button>
<button class="b">U</button>
<button class="b">I</button>
<button class="b">U</button>
<button class="b">I</button>
<button class="b">U</button>
<button class="b">I</button>
<button class="b">I</button>
<button class="b">U</button>
<button class="b">I</button>
<button class="b">U</button>
<button class="b">I</button>
<button class="b">U</button>
<button class="b">I</button>
<button class="b">U</button>
<button class="b">I</button>
</div>
<h4>Arrange now</h4>
<ul id="sortableToo">
<li>Other Item A</li>
<li>Other Item B</li>
<li>Other Item C</li>
<li>Other Item D</li>
<li>Other Item E</li>
<li>Other Item F</li>
<li>Other Item A</li>
<li>Other Item B</li>
<li>Other Item C</li>
<li>Other Item D</li>
<li>Other Item E</li>
<li>Other Item E</li>
<li>Other Item F</li>
</ul>
<ul id="sortableToo">
<li>Other Item F</li>
<li>Other Item A</li>
<li>Other Item B</li>
<li>Other Item C</li>
<li>Other Item D</li>
<li>Other Item E</li>
<li>Other Item F</li>
<li>Other Item A</li>
<li>Other Item B</li>
<li>Other Item C</li>
<li>Other Item D</li>
<li>Other Item E</li>
<li>Other Item F</li>
</ul>
<a href="" class="button">Submit</a>
<a href="" class="button alt-button"> Reset</a>
</div>
<!-- .container -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="jquery-3.3.1.js"><\script>');
</script>
<script src="js/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script src="js/matchalphabate.js"></script>
</body>
</html>
CSS代码在这里
.container {
position: relative;
width:1000px;
height: 1500px;
margin: 40px auto;
background:#234567;
padding: 20px;
box-sizing: border-box;
border: solid 1px #ccc;
box-shadow: 10px 10px 10px 10px #333;
}
h1{
text-align: center;
color:dimgrey;
color: aliceblue;
text-shadow: 2px -10px black;
}
#dragable{
height: 400px;
width: 900px;
background:#7c345d;
box-sizing:content-box;
border: solid 1px #ddd;
padding: 20px;
}
h3,h4{
text-align: center;
font-size: 30px;
font-family: sans-serif;
color: aqua;
text-shadow: 2px -10px black;
}
.alphabate{
position: relative;
height:30px;
width: 200px;
padding: 0 0 1px;
margin: 0 1px;
}
.b{
position: relative;
height:30px;
width:100px;
padding: 10px;
margin: 10PX auto;
}
ul {
width: 48%;
float: left;
margin: 0;
padding: 0 1%;
list-style: none;
}
ul li {
background: #eee;
padding: 10px;
margin: 2px 0;
margin-right: 10px;
width: 340px;
border: solid 1px #ccc;
}
ul li:hover {
background: #ddd;
border-color: #aaa;
cursor: pointer;
}
ul li:active {
transform: rotate(2deg);
background: #ccc;
border-color: #999;
box-shadow: 0 10px -4px #111;
}
.placeholderBox {
background: #fc3;
height: 20px;
border: dashed 2px #777;
}
.button{
display: inline-block;
background:#f99;
background: linear-gradient(green,aqua);
border: solid 1px #999;
border-radius: 5px;
color: white;
padding: 10px 30px 20px;
margin: 80px;
text-decoration: none;
text-shadow:0 1px 3px aqua;
text-align: center;
margin-left:200px;
}
jQuery 来了
$(function (){
$(".b").draggable();
});
我想通过在表格上拖放来选择一个字母表当字母表像 A-Z 一样完全排列时然后在单击提交按钮时显示消息或再次重置将字母表排列在以前的位置
现在按钮不拖动字母 A-Z 也告诉我当我拖动字母并放下列表并单击提交按钮时显示成功排列的消息的情况。
最佳答案
你不能拖动 button 但可以为每个 button 创建一个 div draggable
喜欢它:
$( function() {
$( ".draggable" ).draggable();
} );.draggable { width:300px;}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<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>
<script>
</script>
</head>
<body>
<div class="draggable ui-widget-content">
<button>notDraggable</button>
<button>notDraggable</button>
<button>notDraggable</button>
but draggable div
</div>
<div class="draggable ui-widget-content">
<button>notDraggable</button>
but draggable div
</div>
<div class="draggable ui-widget-content">
<button>notDraggable</button>
but draggable div
</div>
</body>
</html>关于javascript - 在 jQueryUI 中拖动一个按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49761594/