Question

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

我希望使用表格上的拖放选择字母当字母表完全按照AZ排列然后在点击提交按钮上显示消息或重新设置再次排列在先前位置的字母

现在按钮不是拖动字母A-Z还告诉我当我拖动字母并删除列表并单击提交按钮时的状态，以便成功安排消息显示。

Answer 1

您无法拖动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>

在jQueryUI中拖动一个按钮

1 个答案: