This is a rough template for creating drag and drop/sortable lists in WordPress. This is very rough, but gives the frame work. The divs can be about as complex as you want them and created in any way appropriate. In a WordPress environment, you'd need to enqueue the javaScript and create the Ajax functions.

dragdrop.css

#sortable-area {
    width: 100%;
    min-height: 50px;
    border: 1px solid #ccc;
    padding: 10px;
}

.sortable-item {
    margin: 10px;
    padding: 5px;
    border: 1px solid #666;
    cursor: move; /* Cursor indicates item can be moved */
}

dragdrop.html

<div id="sortable-area">
    <div class="sortable-item">Item 1</div>
    <div class="sortable-item">Item 2</div>
    <div class="sortable-item">Item 3</div>
    <!-- Add more items as needed -->
</div>

dragdrop.js

jQuery(document).ready(function($) {
    $("#sortable-area").sortable({
        placeholder: "ui-state-highlight",
        update: function(event, ui) {
            // Optional: Add AJAX code here to update the order in the database
        }
    });
    $("#sortable-area").disableSelection();
});

functions.php

//Probably need to enqueue the jquery to allow the sorting.  Also probably need to enqueue the javascript above.
function enqueue_custom_scripts() {
    wp_enqueue_script('jquery-ui-sortable');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');