Question

我是Web开发的新手。对于以下可拖放对象，需要一些输入。

我在左侧有div列表（可拖动），在右侧有一个可放置区域。可拖动将包含在可放置区域中。

但是iam尝试做的新试验是...我应该使收容区域（框）中放置的物品再次充当可放置物品...以及应放置在（框）中的其他可拖动物品，如果`

$(document).ready(function () {

    $(".doodad").draggable({
        helper: 'clone',
        scroll: true,
        revert:true,
        stop: function( event, ui ) {
            check();
            
        }
    });
    

    $(".box").droppable({
        accept: ".doodad",
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function (event, ui) {
            if ($(ui.draggable).hasClass('copied')) return
            var droppedItem = $(ui.draggable).clone().addClass('copied');
            droppedItem.resizable();
            droppedItem.draggable({
                containment: ".box"
            });
            $(this).append(droppedItem);
            // $(this). resizable();
        }
    });

 $(".doodad  ui-draggable copied ui-resizable").draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
    }

 });
    $(".doodad  ui-draggable copied ui-resizable").droppable({
        accept: "doodad  ui-draggable copied ui-resizable",
        drop: function (event, ui) {
           
            var droppable = $(this);
            var draggable = ui.draggable;
            droppable.resizable();
            // droppable.draggable({
            //     containment: $(this)
            // });
            draggable.appendTo(droppable);
            // $(this). resizable();
    
            draggable.css({background:'red'});
        }
    });
//    function check(){
//     $(".box .doodad").addClass('.afterdroppable');
//     $('.afterdroppable:not(.ui-droppable)' ).droppable(); 
//     alert("dropped")
//    }
//     $( function() {
//         $( "#accordion" ).accordion();
//       } );
    });

.box{
 border :10px solid black;
  display:inline-block; 
  padding: 10px;
}

.boundary{
  height:200px; 
  width:400px;
  background-color: cyan;
}

.boundary1{
  height:400px; 
  width:400px;
  background-color: blue;
}

.content{
    font-size: 13px;
    background-color: #f7f9f2;
    background-image: url(images/watermark.png);
    color: #555;
    border-left: 1px solid #d2d2d2;
    border-bottom: 1px solid #d2d2d2;
    border-right: 1px solid #d2d2d2;
    margin: 4px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.065);
}

.afterdrop
{ width: 100px;
    height: 100px
   ; padding: 0.5em; float: left;  }
.doodad
 { width: 100px;
     height: 100px
    ; padding: 0.5em; border:1px solid black; float: left; margin: 10px 10px 10px 0; }
  .box
   { width: 500px; height: 500px; padding: 0.5em; border:1px solid black;float: left; margin: 10px; }

   .list1
   {
       background-color: aquamarine;
   }

   /* .header
   {
       background-color: black;
       color: aliceblue;
   } */


.title
{
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
}
.active, .accordion:hover {
    background-color: burlywood; 
  }

   .accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
  }

    <!doctype html>
    <html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Droppable - Default functionality</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="stylesinapp.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>
        <!-- jQuery Files -->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

        <!-- AngularJs Files -->
        <script type="text/javascript" src="resource/js/angular_v1.6.0.js"></script>
        <script type="text/javascript" src="C:/Users/t.a.duraisamy/Documents/Jqueryyyyy/angularjss/dragdrop.js"></script>

        <!-- Angular Drag-and-Drop Js -->
        <script type="text/javascript" src="resource/js/angular-dragdrop.min.js"></script>

        <!-- Bootstrap File -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
        <link rel="stylesheet"
            href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css">
        <link rel="stylesheet" href="resource/css/angular-dragdrop.min.css">

    </head>

    <body>
        <table cellspacing="0" cellpadding="0" style="width: 100%; align:left">
            <tr>
                <td align="left" style="vertical-align:top;">
                    <div id="accordian" >
                        
                            <h3>Section 1</h3>
                            <div id="draggable" class="doodad ">
                                <p>Drag me to my target</p>
                            </div>
                            <br>
                            <div id="draggable" class="doodad">
                                <p>Drag me to my target</p>
                            </div>
                            <br>
                            <div id="draggable" class="doodad">
                                <p>Drag me to my target</p>
                            </div>
                            <br>
                        <div id="draggable" class="doodad">
        <img  src="C:\Users\t.a.duraisamy\Documents\Jqueryyyyy\smile.PNG" alt="Smiley face" width="42" height="42">
                        
                        </div>
                        <br>
                        </div>

                    </div>

                    </ul>

                </td>
                <td>
                    <div id="droppable" class="box">
                        <p>Drop here</p>
                    </div>
                </td>

            </tr>

        </table>





    </body>

    </html>

`ct一样。然后将其包裹在上面。

this is the current behaviour

预期的输出：Droppable应该能够接受其他放置的元素，然后将其放置在该放置元素中。现在，它无法正常工作。请告诉我输入内容。

拖放的元素可以拖放并带有自身的可容纳性

0 个答案: