Question

我遇到了一个奇怪的问题，我的jQuery Drag＆amp;当在标题中调用BootStrap的CSS文件时，Drop simulation插件不起作用。

以下是两个带有完全相同代码的小提琴，除了被调用的Bootstrap的CSS文件：

使用BootStrap CSS（不起作用）： http://jsfiddle.net/3os4yhen/1/

没有BootStrap CSS（工作）： http://jsfiddle.net/zy3h3doo/1/

有没有人知道我可以在CSS文件中禁用哪些内容以继续在我的页面的其余部分使用？

非常感谢你！

以下是完整的HTML：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>jQuery Simulate Extended Plugin - jsFiddle demo</title>


<!-- CSS Sheets -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/gosigner.css">

    <!-- THIS IS WHAT CAUSES THE ISSUE 
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/bootstrap.css"> -->

<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/dataTables.css"> 
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/dropzone.css">


<!-- Global JS Files -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<style>
    body {
        background-color: #EAEAEA;
    }

    #view-port {
        margin: 0 auto;
        width: 852px;
    }

    .droppableShape {
        z-index: 10;
    }

    #signature-add-canvas {
        background-image: url("/app/img/sign_bg.png");
    }

    .page {
        margin: 10px 0 10px 0;
        background-repeat: no-repeat;
        width: 850px; 
        height:1100px;
        border: 1px solid #DADADA;
        position: relative;
        background-color: #fff;
        border-radius: 2px;
    }
</style>
</head>

<body>
    <div class="container">
        <div id="view-port">
            <div id="placeme" class="droppableShape">
                <img src="https://upload.wikimedia.org/wikipedia/en/6/6f/Smiley_Face.png" width="25" height="25" />
            </div>
            <button id="testme">Simulate Drop</button>
            <div class="page" id="page1" style="background-image: url(http://images.huffingtonpost.com/2012-08-15-1CanvasPanelInstall5psd.jpg);"></div>
            <!-- Pages Here -->
        </div>
    </div>
</body>


<!-- jQuery UI -->

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type='text/javascript' src="http://j-ulrich.github.com/jquery-simulate-ext/jquery.simulate.js"></script>
<script type='text/javascript' src="http://j-ulrich.github.com/jquery-simulate-ext/jquery.simulate.ext.js"></script>
<script type='text/javascript' src="http://j-ulrich.github.com/jquery-simulate-ext/bililiteRange.js"></script>
<script type='text/javascript' src="http://j-ulrich.github.com/jquery-simulate-ext/jquery.simulate.key-sequence.js"></script>
<script type='text/javascript' src="http://j-ulrich.github.com/jquery-simulate-ext/jquery.simulate.key-combo.js"></script>
<script type='text/javascript' src="http://j-ulrich.github.com/jquery-simulate-ext/jquery.simulate.drag-n-drop.js"></script>

<script>

     $(document).ready(function(){

        $(".droppableShape").draggable({
            helper:'clone'
        });

        $(".page").droppable({
            accept: ".droppableShape",
            tolerance: 'fit',
            drop: function(event,ui){
                alert("Drop Detected");
                // Set variables
                var new_field = $(ui.helper).clone().removeClass('droppableShape');
                var droppable_page = $(this);
                var droppableOffset = $(this).offset();
                new_field.css('top', ui.position.top - droppableOffset.top);
                new_field.css('left', ui.position.left - droppableOffset.left);

                // Set Draggable Options
                new_field.draggable({
                    containment: droppable_page,
                    stop: function(event, ui) {
                       // Save position after dragging stops
                       $(this).data("x_cord", ui.position.left);
                       $(this).data("y_cord", ui.position.top);
                    }
                });

                // Add to drop area
                $(this).append(new_field);
            }
        });

        $( "#testme" ).click(function() {
            $('#placeme').simulate("drag-n-drop", {
                dragTarget: $("#page1")
            });
            console.log("Drag Simulated");
        });
    });

</script>

Answer 1

这是：

-webkit-box-sizing: border-box;
box-sizing: border-box;

..引导程序正在给你。快速简便的覆盖是：

-webkit-box-sizing: none !important;
box-sizing: none !important;

Answer 2

我决定在bootstrap.css文件中逐行排除样式，看看哪个影响了性能：

bootstrap.css的第1068行：

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

如果已注释掉，则“模拟拖放”按钮将起作用

jQuery Drag＆amp;引导插件受BootStrap CSS影响

2 个答案: