Click here to Skip to main content
12,065,060 members (46,004 online)
Rate this:
 
Please Sign up or sign in to vote.
See more: ASP.NET MVC jQuery Razor
I am trying to create a dashboard, But m having problem dragging item from one partial view to another the dragged item disappears after dragging.
@{
    Layout = null;
}
 
<script src="~/Scripts/jquery-1.8.0.min.js"></script>
<link href="~/Content/Stylesheets/easyui.css" rel="stylesheet" />
<script src="~/Scripts/jquery.easyui.min.js"></script>
<script src="~/Scripts/ui.droppable.js"></script>
 
<style type="text/css">
    .dragCompleted
    {
        margin-top: 5px;
        text-decoration: none;
        color: #000;
        background: #9cd86d;
        display: block;
        padding: 1em;
        /* Firefox */
        -moz-box-shadow: 5px 5px 7px rgba(33,33,33,1);
        /* Safari+Chrome */
        -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
        /* Opera */
        box-shadow: 5px 5px 7px rgba(33,33,33,.7);
        border: 1px solid #ccc;
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
        cursor: move;
        z-index: 999;
    }
 
    #targetareaCompleted
    {
        border: 1px solid black;
        height: 200px;
    }
 
    .proxy
    {
        border: 1px solid #ccc;
        width: 80px;
        background: #fafafa;
        z-index: 999;
    }
</style>
 
<script type="text/javascript">
    jQuery(document).ready(function () {
        $(".dragInProgress").draggable();
 
        //$(function () {
        $('.dragCompleted').draggable({
            revert: true,
            deltaX: 20,
            deltaY: 20,
            proxy: function (source) {
                var n = $('<div class="proxy"></div>');
                n.html($(source).html()).appendTo('body');
                return n;
            },
            onStopDrag: function (e, source) {
                $(this).remove();
            }
        });
        //});

        //$(function () {
        $('#targetareaCompleted').droppable({
            activate: function (event, ui) { alert('dropped');},
            onDrop: function (e, source) {
                $('.dashboardCompletedItemBody').append(" <div class="dragCompleted">" + $(source).html() + "</div>");
                $('.dashboardCompletedItemBody').find('.dragCompleted').addClass('dragCompleted');
                //$('.dashboardCompletedItemBody').find('.dragCompleted').removeClass('dragInProgress');
                $(".dragCompleted").draggable('enable');
                $(".dragCompleted").css("z-index:9999");
                $(".dragCompleted").draggable({
                    proxy: function (source) {
                        var n = $('<div class="proxy"></div>');
                        n.html($(source).html()).appendTo('body');
                        return n;
                    }
                });
               
            },
            over: function( event, ui ) { alert('dropped');}
 
        });
    });
 
</script>
 
<div class="CompletedItem">
    <div class="CompletedItemHeader" align="center">Completed</div>
    <div id="easyui-droppable targetareaCompleted">
        <div class="CompletedItemBody" align="center">
        </div>
    </div>
</div>
[Edit]Code block added[/Edit]
Posted 11-Mar-13 9:44am
Edited 11-Mar-13 9:47am
ProgramFOX178.2K
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web02 | 2.8.160204.4 | Last Updated 11 Mar 2013
Copyright © CodeProject, 1999-2016
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100