Question

我是jQueryUI的新手，我无法将多个<li>元素拖到放置区域。但是我设法拖动一个并将其放在掉落区域。请任何人帮助我。

的JavaScript

$(function() {
    $trash= $( "#trash" );

    $("a", ".polaroids").draggable({
     zIndex: 999,
        revert: "invalid" ,
        helper: function(){
            $copy = $(this).clone();
            return $copy;},
        appendTo: 'body',
        scroll: false
    });

    $("a", ".polaroids").selectable();
        $trash.droppable({
        accept: ".polaroids a",
        activeClass: "custom-state-active",
        drop: function( event, ui ) {
            $(this).append(ui.draggable);
            }
    });
});

以下是<div>，其中<li>元素被逐一拖动

<div class="st_view_container">
    <div class="st_view">
    <?php
        foreach($gpID as $k => $v) {
    ?>
        <div id="stv_content_<?php echo $v;?>" class="st_tab_view st_first_tab_view">
            <ul class="polaroids" id ="polaroids">
            <?php
                $sql2=mysql_query("select * from user_group WHERE group_id='$v' AND user_id=3");
                $i=1;
                while($row=mysql_fetch_array($sql2)) {
                    $memid=$row['member_id'];
                    $sql1=mysql_query("select * from users_profile WHERE uid='$memid'");

                    while($row1=mysql_fetch_array($sql1)) {
                        $ufname=$row1['fname'];
                        $ulname=$row1['lname'];
                        $upic=$row1['profile_pic'];
            ?>
                <li>
                    <a href="#" title="<?php echo $ufname; ?>">
                        <img src="../<?php echo $upic; ?>" rel="<?php echo $row1['uid']?>" width="65px" height="65px" />
                    </a>
                </li>
                <?php
                        if($i%6==0) {;}
                        $i++;
                    }
                ?>
            </ul>
        </div>
    <?php } ?>
    </div> <!-- /.st_view -->
</div> <!-- /.st_view_container -->

这里是<div>我想要删除多个元素，但不是一个一个。

<div id="trash" style="width:200px; height:200px; border:1px solid;">
    <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
</div>

Answer 1

根据一些研究，这是a demo ......

和我一起玩jQueryUI droppable photo manager演示，这是你用作模板的。

功能包括单击和拖动（默认行为）或使用 Ctrl +左键单击选择多个项目，然后拖动。 拖动助手功能用于选择class="selected"的所有项目，并自定义 drop 功能以从容器中提取img元素拖动帮助将它们添加到。另一个函数simple启用 Ctrl +单击行为。

下面的代码在演示中重复，但确实需要jQuery，jQueryUI和其中一个jQueryUI themes。

HTML

<ul id="draggable">
    <li><img src="nature-q-c-50-50-1.jpg" alt="" /></li>
    <li><img src="nature-q-c-50-50-2.jpg" alt="" /></li>
    <li><img src="nature-q-c-50-50-3.jpg" alt="" /></li>
    <li><img src="nature-q-c-50-50-4.jpg" alt="" /></li>
    <li><img src="nature-q-c-50-50-5.jpg" alt="" /></li>
    <li><img src="nature-q-c-50-50-6.jpg" alt="" /></li>
</ul>

<div id="trash">
    <h4 class="ui-widget-header">Trash<span class="ui-icon ui-icon-trash"></span></h4>
</div>

CSS

body {
    font-family:"Trebuchet MS";
}
#draggable {
    margin:0;
    padding:10px;
    width:300px;
    list-style-type:none;
    background-color:#000;
}
li {
    display:inline;
}
img {
    border:5px solid white;
}
.image-group img {
    margin-right:5px;
}
#trash {
    margin-top:10px;
    width:200px;
    height:200px;
    border:1px dotted #000;
}
.selected {
    border-color:#aed0ea
}
#trash h4 {
    margin:0;
    padding:0 5px;
}
.ui-icon {
    display:inline-block;
}

的JavaScript

$('#draggable li').draggable({
    revertDuration:100,
    helper:function() {
        var selected = $('#draggable img.selected');

        if (selected.length === 0) {
            selected = $('img', $(this)).addClass('selected');
        }
        console.log('selected', selected);
        var container = $('<div class="image-group"/>');
        container.append(selected.clone());
        console.log('container', container);
        return container;
    },
    cursorAt:{ left:25,top:25 }
});

$('#trash').droppable({
    drop: function(event, ui) {
        var newItems = $(ui.helper).find('img').clone(false)
                        .removeClass('selected');  

        $(this).append(newItems);
        console.log('ui.draggable', ui.draggable);
        $('#draggable img.selected').parent().remove();
    }
});

$('#draggable li').click(function(event) {
    if (event.ctrlKey) {
        $('img', $(this)).toggleClass('selected');
    }
});

将多个元素同时拖动到拖放区域

的JavaScript

1 个答案:

HTML

CSS

的JavaScript