不同局部视图MVC中的Jquery拖放问题 [英] Jquery Drag and Drop Problem in different Partial View MVC

问题描述

我正在尝试创建一个仪表板，但是拖动项目从一个局部视图拖动到另一个部分视图拖动后拖动项目消失了。

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]

推荐答案

（ 。dragInProgress）。可拖动（）;

//

(".dragInProgress").draggable(); //

（function（）{

(function () {

（' 。dragCompleted'）。 draggable（{
revert： true ，
deltaX： 20 ，
deltaY： 20 ，
proxy： function （source）{
var n =

('.dragCompleted').draggable({ revert: true, deltaX: 20, deltaY: 20, proxy: function (source) { var n =

这篇关于不同局部视图MVC中的Jquery拖放问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！