jQuery 受 BootStrap CSS 影响的拖放插件

Question

我运行遇到了一个奇怪的问题，当 BootStrap 的 CSS 文件在 header.

这里有两个代码完全相同的小提琴，除了 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

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

bootstrap.css 的第 1068 行：

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

当它被注释掉时，模拟放置按钮起作用

Answer 2

这是 :

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

..bootstrap 给了你。一个快速简单的覆盖是：

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

jQuery 受 BootStrap CSS 影响的拖放插件

jQuery Drag & Drop Plugin Effected by BootStrap CSS

jquery

css

twitter-bootstrap

jquery-ui-draggable