使用jquery拖放功能

时间:2015-07-24 05:59:20

标签: javascript jquery jquery-ui jquery-ui-sortable droppable

我想实现类似于this website上给出的示例1.3的功能。请帮助。

4 个答案:

答案 0 :(得分:1)

以下是使用演示页

的工作示例demo

for html

<div id="example-1-3">
            <div class="column left first">
                <ul class="sortable-list">
                    <li class="sortable-item">Sortable item A</li>
                    <li class="sortable-item">Sortable item B</li>
                </ul>

            </div>

            <div class="column left">

                <ul class="sortable-list">
                    <li class="sortable-item">Sortable item C</li>
                    <li class="sortable-item">Sortable item D</li>
                </ul>

            </div>

            <div class="column left">

                <ul class="sortable-list">
                    <li class="sortable-item">Sortable item E</li>
                </ul>

            </div>

            <div class="clearer">&nbsp;</div>

        </div>

表示js

$(document).ready(function(){
// Example 1.3: Sortable and connectable lists with visual helper
$('#example-1-3 .sortable-list').sortable({
    connectWith: '#example-1-3 .sortable-list',
    placeholder: 'placeholder',
});
});

答案 1 :(得分:0)

从您提到的页面上的代码:

    // Example 1.3: Sortable and connectable lists with visual helper
    $('#example-1-3 .sortable-list').sortable({
        connectWith: '#example-1-3 .sortable-list',
        placeholder: 'placeholder',
    });

只需将connectWith设置为#id或.class就可以了。 HTML(如链接演示中所示)将是:

            <div id="example-1-3">

                <div class="column left first">

                    <ul class="sortable-list">
                        <li class="sortable-item">Sortable item A</li>
                        <li class="sortable-item">Sortable item B</li>
                    </ul>

                </div>

                <div class="column left">

                    <ul class="sortable-list">
                        <li class="sortable-item">Sortable item C</li>
                        <li class="sortable-item">Sortable item D</li>
                    </ul>

                </div>

                <div class="column left">

                    <ul class="sortable-list">
                        <li class="sortable-item">Sortable item E</li>
                    </ul>

                </div>

                <div class="clearer">&nbsp;</div>

            </div>

答案 2 :(得分:0)

如果适合您,请查看以下链接。 Fiddle

Employment__c[] results = [select id,(select id,name from Attachments)  from Employment__c where id in (select Current_Employment__c from Team_Member__c where id=:id)];    

for (Employment__c result : results) {
   if(result.Attachments!=null){
       List<Attachment> AttachmentList=result.Attachments;
   }
}

答案 3 :(得分:0)

$(function(){
        $('html').niceScroll({cursorcolor:"#639BF6",cursorwidth :10, cursorborder: 'none'});
        //dad simple demo
        $('.dad').dad();
    })
<script src="http://konsolestudio.com/dad/jquery.min.js"></script>
<script src="http://konsolestudio.com/source/jquery.dad.js"></script>
<script src="http://konsolestudio.com/dad/jquery.nicescroll.min.js"></script>
<link href="http://konsolestudio.com/source/jquery.dad.css" rel="stylesheet"/>
<link href="http://konsolestudio.com/dad/demo.css" rel="stylesheet"/>



<div id="daddy" class="dad">
        <div>
            <div>1</div>
        </div>
        <div>
            <div>2</div>
        </div>
        <div>
            <div>3</div>
        </div>
        <div>
            <div>4</div>
        </div>
        <div>
            <div>5</div>
        </div>
        <div>
            <div>6</div>
        </div>
        <div>
            <div>7</div>
        </div>
        <div>
            <div>8</div>
        </div>
        <div>
            <div>9</div>
        </div>
        <div>
            <div>10</div>
        </div>
    </div>

嗨阿曼试试这个: