Question

我正在尝试创建一个三个区域，可以根据类型拖动图像 type1图像到binA ... type2图像到binB type3images到binC

帮我解决一下我的错误是droppable只在一个...其他人不接受项目请帮忙

这是我的代码

<div class="wrapper">
<center>

    <table border="1">

        <tr>
        <td>
            <div class="dropholder0">
                <div id="dropable1">

                </div>

            </div>
        </td>
        <td>
            <div class="dropholder1">
                <div id="dropable2">

                </div>
            </div>
        </td>
        <td>
            <div class="dropholder2">
                <div id="dropable3">

                </div>
            </div>
        </td>

        </tr>

    </table>
</center>


<div class="photo-album">

    <h1><span>Drag these pictures to above bars</span></h1>

    <a href="#" class="draggable large polaroid img1 type1">
        <img src="images/Pic21.png" alt="">
        <p>description or caption of this pic</p>
    </a>
    <a href="#" class="draggable medium polaroid img4 type2">
        <img src="images/Pic24.png" alt="type2">
        <p>type2</p>
    </a>

    <a href="#" class="draggable polaroid img6 type3">
        <img src="images/Pic26.png" alt="">
        <p>type 3</p>
    </a>
</div>

jquery UI功能

   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
   <script type="text/javascript">

(function() {

    $( ".draggable" ).draggable();
    $( "#dropable1" ).droppable({ 
        activeClass: "small",
        accept: ".type1",
        drop: function(en,ui) {
            console.log(ui);
        }


    });

    $( "#dropable1" ).on( "drop", function( event, ui ) {
        // ui.draggable.width('50');
        // ui.draggable.height('50');
        console.log(ui.draggable.attr('class'));
        var allClass = ui.draggable.attr('class')
        ui.draggable.removeClass(allClass);
        ui.draggable.draggable( 'disable' );
        ui.draggable.addClass('draggable small polaroid imageChanged');

    } );

    $(".dropholder").find( "#dropable2" ).droppable({ 
        activeClass: "small",
        accept: ".type2",
        drop: function(en,ui) {
            console.log(ui);
            console.log('type2')


        }});

    $(".dropholder").find( "#dropable2" ).on( "drop", function( event, ui ) {
        console.log('type2');
        console.log(ui.draggable.attr('class'));
        var allClass = ui.draggable.attr('class')
        ui.draggable.removeClass(allClass);
        ui.draggable.draggable( 'disable' );
        ui.draggable.addClass('draggable small polaroid imageChanged');

    } );

    $( "#dropable3" ).droppable({ 
        activeClass: "small",
        accept: ".type2",
        drop: function(en,ui) {
            console.log(ui);
        }


    });

    $( "#dropable3" ).on( "drop", function( event, ui ) {
        console.log(ui.draggable.attr('class'));
        var allClass = ui.draggable.attr('class')
        ui.draggable.removeClass(allClass);
        ui.draggable.draggable( 'disable' );
        ui.draggable.addClass('draggable small polaroid imageChanged');

    } );

})();

提前致谢：）

jsfiddle link＆gt;＆gt; http://jsfiddle.net/JuA5P/

Answer 1

您的droppables没有高度，因此无法将可拖动的图像丢弃。

给他们一些高度

<div id="dropable2" style="width: 200px; height:200px; border: 1px solid red">

                    </div>

http://jsfiddle.net/JuA5P/1/

多种类型的draggable for multiple droppables jquery

1 个答案: