javascript - 使用 jquery 拖放(一个工具箱和一个报告窗口)

Question

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

我正在尝试将 div 用作工具箱(也是 div)中的工具箱项。我正在尝试使用拖放到表单(另一个 div)上。该元素成功出现在表单上，​​但是随后的掉落导致该元素在页面中越来越低。看起来好像 div 仍然 float 到前一个元素的底部。我试图让元素出现在鼠标指针所在的位置，然后再放到表单上。

我的代码:

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在放置事件中的位置绝对。并使 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>