使用jQuery拖放（工具箱和报告窗口）

Question

经过大量搜索后，我来到了这里。

我正在尝试使用div作为工具箱（也是div）中的工具箱项。我正在尝试使用拖放到窗体（另一个div）上。该项目成功显示在窗体上，但是随后的放下将导致该项目在页面上越来越低。看来div仍在浮动到上一项的底部。我试图让该项目出现在鼠标指针放到表单上之前的位置。

我的代码：

var mouseX, mouseY;
    $(document).ready(function() {
        //$.getJSON('index.php?option=com_report&layout=datajson&format=json', function(result) {
        //    $.each(result.titles, function(i, item) {
                
        //            $('#mogrify_report').append('<br/>' + item);
        //    });
        //});
        $('.mogrify_report_tool').draggable({
            
            revert: 'invalid',
            helper: 'clone',
        });
        $('#mogrify_report').droppable({
            accept: '.mogrify_report_tool',
            drop: function(event, ui) {
                
                var droppable = $(this);
                var draggable = ui.draggable;
                

                if(!draggable.hasClass('.mogrify_report_component')) {
                    var cloned = draggable.clone();
                    cloned.draggable();
                    
                    cloned.detach().prependTo(droppable);

                    
                    cloned.addClass('.mogrify_report_component');

                    cloned.css('top', mouseY - droppable.offset().top);
                    cloned.css('left', mouseX - droppable.offset().left);
                }
            }
        });
        $(document).on('mousemove', function(event) {
            //$('#mogrify_report').text( 'pageX:' + event.pageX + ', pageY: ' + event.pageY);
            mouseX = event.pageX;
            mouseY = event.pageY;
        });
    });
    

#mogrify_reportbackground {
    background: #8888ff;
    width: 1200px;
    height: 650px;
    margin: 0 auto;
    overflow: scroll;
}

#mogrify_padding {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    height: 100%;
    display: table;
}

#table_row {
    display: table-row;
    width: auto;
    clear: both;
}

#table_col_toolbox {
    float: left;
    display: table-column;
    width: 150px;
}

#table_col_report {
    float: left;
    display: table-column;
    width: 900px;
}

#table_col_padding {
    float: left;
    display: table-column;
    width: 150px;
}

#mogrify_toolbox {
    background: #FFFFFF;
    width: 100px;
    height: 400px;
    margin: 0 auto;
    border: 1px solid black;
    
}



#mogrify_tool_label {
    border: 1px solid black;
    width: 50px;
    height: 50px;
}

.mogrify_report_tool {
    position: fixed;
}

.mogrify_report_component {
   
}

#mogrify_report {
    background: #FFFFFF;
    border: 1px solid black;
    width: 800px;
    height: 1200px;
    margin: 0 auto;
}

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mogrify_reportbackground">
	<div id="mogrify_padding">
    	<div id="table_row">
    		<div id="table_col_toolbox">
        		<div id="mogrify_toolbox">
        			<div id="mogrify_tool_label" class="mogrify_report_tool">
        				Label
        			</div>
        		</div>
    		</div>
    		<div id="table_col_report">
                <div id="mogrify_report">
                
                </div>
            </div>
            <div id="table_col_padding">
            
    		</div>
        </div>
    </div>
</div>

Answer 1

使mogrify_report_tool在掉落事件中的位置absolute。并使mogrify_report'在您的CSS中相对。

var mouseX, mouseY;
    $(document).ready(function() {
        //$.getJSON('index.php?option=com_report&layout=datajson&format=json', function(result) {
        //    $.each(result.titles, function(i, item) {
                
        //            $('#mogrify_report').append('<br/>' + item);
        //    });
        //});
        $('.mogrify_report_tool').draggable({
            
            revert: 'invalid',
            helper: 'clone',
        });
        $('#mogrify_report').droppable({
            accept: '.mogrify_report_tool',
            drop: function(event, ui) {
                
                var droppable = $(this);
                var draggable = ui.draggable;
                

                if(!draggable.hasClass('.mogrify_report_component')) {
                    var cloned = draggable.clone();
                    cloned.draggable();
                    
                    cloned.detach().prependTo(droppable);

                    
                    cloned.addClass('.mogrify_report_component');
  cloned.css('position','absolute');
                    cloned.css('top', mouseY - droppable.offset().top);
                    cloned.css('left', mouseX - droppable.offset().left-25);
                }
            }
        });
        $(document).on('mousemove', function(event) {
            //$('#mogrify_report').text( 'pageX:' + event.pageX + ', pageY: ' + event.pageY);
            mouseX = event.pageX;
            mouseY = event.pageY;
        });
    });

#mogrify_report {
position:relative;
}
#mogrify_reportbackground {
    background: #8888ff;
    width: 1200px;
    height: 650px;
    margin: 0 auto;
    overflow: scroll;
}

#mogrify_padding {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    height: 100%;
    display: table;
}

#table_row {
    display: table-row;
    width: auto;
    clear: both;
}

#table_col_toolbox {
    float: left;
    display: table-column;
    width: 150px;
}

#table_col_report {
    float: left;
    display: table-column;
    width: 900px;
}

#table_col_padding {
    float: left;
    display: table-column;
    width: 150px;
}

#mogrify_toolbox {
    background: #FFFFFF;
    width: 100px;
    height: 400px;
    margin: 0 auto;
    border: 1px solid black;
    
}



#mogrify_tool_label {
    border: 1px solid black;
    width: 50px;
    height: 50px;
}

.mogrify_report_tool {
    position: fixed;
    z-index:50;
}

.mogrify_report_component {
   
}

#mogrify_report {
    background: #FFFFFF;
    border: 1px solid black;
    width: 800px;
    height: 1200px;
    margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">

<div id="mogrify_reportbackground">
	<div id="mogrify_padding">
    	<div id="table_row">
    		<div id="table_col_toolbox">
        		<div id="mogrify_toolbox">
        			<div id="mogrify_tool_label" class="mogrify_report_tool">
        				Label
        			</div>
        		</div>
    		</div>
    		<div id="table_col_report">
                <div id="mogrify_report">
                
                </div>
            </div>
            <div id="table_col_padding">
            
    		</div>
        </div>
    </div>
</div>