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;
-moz-box-shadow: 5px 5px 7px rgba(33,33,33,1);
-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
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();
$('.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();
}
});
$('#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');
$(".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]