Drag and Drop Test #2

by jch02140

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="contentarea">
    <ul id="sortable1" class="connectedSortable">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
    </ul>

    <ul id="sortable2" class="connectedSortable">
        <li class="ui-state-default">Item 6</li>
        <li class="ui-state-default">Item 7</li>
        <li class="ui-state-default">Item 8</li>
        <li class="ui-state-default">Item 9</li>
        <li class="ui-state-default">Item 10</li>
    </ul>
</div>
<br />
<div id="contentbox">

    <div class="title">» Title</div>
    <div class="content">Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat. Claritatem aliquip quod putamus
        vulputate iusto. Doming minim typi zzril lius usus. In clari mutationem autem non sit. Qui augue mirum dynamicus gothica ut. Demonstraverunt processus soluta sequitur autem demonstraverunt.</div>
</div>
<br />
<div id="contentbox2">
    <img src="http://www.w3schools.com/html/html5.gif">
</div>

CSS

#contentbox {
        padding: 0;
        margin: 0;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border: 3px solid #b8c6dd;
        width: 450px;
    }
    
    #contentbox .title {
        background: rgb(30, 87, 153);
        /* Old browsers */
        background: -moz-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
        /* IE6-9 */
        padding: 13px;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 25px;
        color: #FFF;
        font-weight: bold;
        text-shadow: #069 1px 1px 1px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        -moz-border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
    }
    
    #contentbox .content {
        font-size: 16px;
        color: #666;
        font-family: Tahoma, Geneva, sans-serif;
        padding: 6px;
        line-height: 24px;
        border-bottom: 1px solid #b8c6dd;
    }
    
    #contentbox2 {
        padding: 0;
        margin: 0;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border: 3px solid #b8c6dd;
        width: 128px;
    }
    
    #contentarea {
        padding: 0;
        margin: 0;
        border-radius: 5px;
        -moz-border-radius: 5px;
       ...

JavaScript

$(function() {
        $("#sortable1, #sortable2").sortable({
            connectWith: ".connectedSortable",
            placeholder: "ui-state-highlight"
        }).disableSelection();

        $("#contentbox").draggable({
            connectToSortable: "#sortable1, #sortable2",
            helper: "clone",
            revert: "invalid"
        });
        $("#contentbox2").draggable({
            connectToSortable: "#sortable1, #sortable2",
            revert: "invalid"
        });
    });