小编asl*_*esk的帖子

我有拖放功能的问题,我希望有人可以提供帮助.简而言之,规则是:

1. "stage"(.stage)中可以有多个可以接受克隆的.pageControl.它是唯一可以接受的课程.

2. 一旦放在.stage上,.pageControl就会变成.pageControlDropped并且可以接受克隆的.wfcControl.它是唯一可以接受的课程.

3. 一旦.wfcControl被删除,它将被替换为新的html并变为.wfcControlDropped.

我的问题是:

1. 当我将克隆的.pageControl拖到.stage时,它会跳转到.stage上的一个位置,而不是我正在放弃它的位置.我可以把它拖回到我想要的地方,但它需要放在我丢弃的地方.我尝试了CSS定位,但它似乎适用于.pageControl.一旦.pageControl - > .pageControlDropped,它就会跳转到另一个位置.而且,它不像示例中那样具有非常流畅的阻力

2. 如果我将多个.pageControls拖到.stage,它们中的任何一个都应该接受.wfcControl.但似乎只有第一个.pageControl(现在.pageControlDropped)接收它.我无法获得第二个.pageControlDropped来接收它.

3. 如何让连续的.pageControl不覆盖.stage上的现有.

CSS:

 <style type="text/css">
 .stage { margin-left: -.3em; width: 500px; height: 550px; padding: 0.0em;}
 .pageControl {height:15px; width:15px; background-color:#EAEEFF; border:1px solid blue;}
 .pageControlDropped {height:450px; width:600px;background-color:#F9FAFF;border:1px solid blue;}
 .wfcControl { }
 .wfcControlDropped {  }
 </style>

JQuery的:

    $('.pageControl').draggable({
                helper: 'clone',
                snap: false,
                containment: '.stage',
                handle: '.wfcHandle',
                stop: function (event, ui) {
                    var pos = $(ui.helper).offset();
                    $(this).css({
                        "left": pos.left,
                        "top": pos.top
                    });
                }
            });
    $('.wfcControl').draggable({ helper: 'clone', containment: '.pageControlDropped' });
    $('.stage').droppable({
                accept: '.pageControl',
                greedy: …

我已经看过几次这个问题,但它们主要与个别物品和饼干有关.我正在构建一个具有工具箱拖放功能的应用程序(非常类似于您在Visual Studio中看到的 - 即将对象拖到窗体上,为它们命名等等)因此可放置区域可能包含许多对象,包括嵌套的droppables.

关于什么是保存到SQL Server数据库的最佳方法,然后重新加载这样一个复杂的布局的任何意见？对象需要加载并完全按照保存的方式显示.它将由ajax完成,但除此之外,我不确定最好的方法.任何可能指向正确方向的例子都会很棒.

非常感谢.