Question

我想在我的代码中添加jQuery UI的可排序功能。此外，如果你们可以帮助我将幻灯片切换功能应用于特定的单击div元素而不是全部，那将是很棒的。我已将此代码与此查询一起附加。 ## Heading ##干杯。

<html>
    <head>
        <title>Drag and Drop</title>
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato">
        <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

        <style>

            #body_design
            {
                margin-left : 50px;
                margin-right : 0px;
                margin-top : 0px;
                padding : 0px;
                background-color : #00FFFF;

            }

            #header
            {
                margin-left : -50px;
                margin-top : 0px;
                height : 80px;
                padding-top : 10px;
                padding-left : 100px;
                padding-bottom : 20px;
                background-color : #163C50;
            }

            #add
            {
                width : 160px;
                height : 90px;
                background-color : #233B3B;
                text-align : center ;
                font-family : 'Lato',serif;
                font-size :  70px;
                font-weight : 400;

            }

            #container
            {
                margin-top : 20px;
                padding-top : 10px;
                padding-left : 10px;
                padding-bottom : 10px;
                padding-right : 10px;
                margin : left : 50px;
                margin-right : 50px;
                text-align : center;
                position : relative;
            }

            .module
            {

                height : 35px;
                background-color : #1E506B;
                margin : 60px;
                font-family : 'Lato',serif;
                font-weight : bold;
                padding-top : 12px;
                padding-bottom : 12px;
                text-align : center;

            }

            .deleteModule
            {
                float : right;
                padding-right : 80px;
                padding-bottom : 40px;

            }

            .star
            {
                float : right;
                padding-right : 60px;
                padding-bottom : 30px;
                padding-bottom : 40px;
            }

            .dropModule
            {
                height : 58px;
                background-color : #000000;
                margin-top : -30px;
                width : 50px;
                position : absolute;
            }

            .panel
            {
                height : 30px;
                background-color : #FFFFFF;
                margin : 30px;
                font-family : 'Lato',serif;
                font-weight : bold;
                padding-top : 12px;
                padding-bottom : 12px;
                text-align : center;
            }

        </style>

    </head>

    <body id = "body_design">
        <div id = "header">
            <button id = "add">+</button>
        </div>

        <div id = "container" style = "border :2px solid #000000 "></div>

        <script>

            var sum = 0;

            $(document).ready(function(){
                $("#add").click(function(){
                    document.getElementById("container");
                    var addDiv  = $('<div class = "module"></div>');
                    $("#container").append(addDiv);

                        sum = sum + 1;
                    for (var i = 0; i <= sum; i++)
                    {
                        var divInner = document.getElementsByClassName('module');
                        divInner[i].innerHTML = i+1;

                        $('<img class = "deletemodule" src="delete.png" width = "20" height = "20">').appendTo(divInner[i]);
                        $('<img class = "star "src="starBlack.png" width = "20" height = "20" >').appendTo(divInner[i]);
                        $('<div class = "dropModule"></div>').appendTo(divInner[i]);
                        $('<div class = "panel" display : "none"></div>').appendTo(divInner[i]);
                        $(".panel").hide();

                        //To change the color of the star
                        var starClick = document.getElementsByClassName('star');
                        $(starClick[i]).click(function(){
                            if($(this).attr('src') === 'starBlack.png')
                            {
                                $(this).attr('src','starGolden.png'); 
                            }
                            else
                            {
                                $(this).attr('src','starBlack.png');
                            }
                        });

                        //To make confirm element
                        var deleteBox = document.getElementsByClassName('deletemodule');
                        $(deleteBox[i]).click(function(){
                            if(confirm("Confirm:Delete Module") === true)
                            {
                                    alert('po');
                            }
                        });

                        //To slide the module
                        var moduleInner = document.getElementsByClassName('dropModule');
                        var panel1 = document.getElementsByClassName('panel');
                        $(moduleInner[i]).click(function(){

                            {$(panel1[i]).show();
                            $('.panel').slideToggle();}
                        });


                        //To drag and drop module
                    }   
                });

            });


        </script>
    </body>
</html>

Answer 1

在此，新添加的项目也是可排序的。

＆＃13;

var sum = 0;

$(document).ready(function() {

  $('#container').sortable();
  $("#add").on('click', function() {
    var sum = 0;
    var addDiv = $('<div class = "module"></div>');
    sum = sum + 1;
    $('<img>', {
      class: "deletemodule",
      src: '',
      width: "20"
    }).appendTo(addDiv);
    $('<img >', {
      class: "star",
      src: 'blackstar',
      width: "20"
    }).appendTo(addDiv);
    $('<div class = "dropModule"></div>').appendTo(addDiv);
    $('<div class = "panel" style="display : none;"></div>').appendTo(addDiv);
    console.log(addDiv);
    $("#container").append(addDiv);
  });


  $('#container')
    .on('click', 'img.star', function() {
      alert(1);
      if ($(this).attr('src') === 'blackstar')
        $(this).attr('src', 'goldstar');
      else
        $(this).attr('src', '');
    })
    .on('click', 'img.deletemodule', function() {
      if (confirm("Confirm:Delete Module") === true)
        alert('po');
    })
    .on('click', '.dropModule', function() {
      alert(3);
      $(this).closest('.panel').show();
      $('.panel').slideToggle();
    });

});

＆＃13;

            #body_design {

              margin-left: 50px;

              margin-right: 0px;

              margin-top: 0px;

              padding: 0px;

              background-color: #00FFFF;

            }

            #header {

              margin-left: -50px;

              margin-top: 0px;

              height: 80px;

              padding-top: 10px;

              padding-left: 100px;

              padding-bottom: 20px;

              background-color: #163C50;

            }

            #add {

              width: 160px;

              height: 90px;

              background-color: #233B3B;

              text-align: center;

              font-family: 'Lato', serif;

              font-size: 70px;

              font-weight: 400;

            }

            #container {

              margin-top: 20px;

              padding-top: 10px;

              padding-left: 10px;

              padding-bottom: 10px;

              padding-right: 10px;

              margin: left: 50px;

              margin-right: 50px;

              text-align: center;

              position: relative;

            }

            .module {

              height: 35px;

              background-color: #1E506B;

              margin: 60px;

              font-family: 'Lato', serif;

              font-weight: bold;

              padding-top: 12px;

              padding-bottom: 12px;

              text-align: center;

            }

            .deleteModule {

              float: right;

              padding-right: 80px;

              padding-bottom: 40px;

            }

            .star {

              float: right;

              padding-right: 60px;

              padding-bottom: 30px;

              padding-bottom: 40px;

            }

            .dropModule {

              height: 58px;

              background-color: #000000;

              margin-top: -30px;

              width: 50px;

              position: absolute;

            }

            .panel {

              height: 30px;

              background-color: #FFFFFF;

              margin: 30px;

              font-family: 'Lato', serif;

              font-weight: bold;

              padding-top: 12px;

              padding-bottom: 12px;

              text-align: center;

            }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<div id="header">
  <button id="add">+</button>
</div>

<div id="container" style="border :2px solid #000000 "></div>

＆＃13;

如何使用jQuery UI对动态创建的div元素进行排序？

1 个答案: