在jQueryUI中拖动一个按钮

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

喜欢它：

$( 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>

相关内容

最新更新

热门标签：