Javascript Jquery snapElements未定义的拖动事件_Javascript_Jquery_Html_Css

Javascript Jquery snapElements未定义的拖动事件

javascript jquery html css

Javascript Jquery snapElements未定义的拖动事件,javascript,jquery,html,css,Javascript,Jquery,Html,Css,问题是： <style> #snaptarget { height: 300px; background-color: white; background-image: url('http://egords27.edumsko.ru/images/users-files/egords27/ood/132421643034.jpg');} .draggable { width: 90px; height: 80px;

问题是：

  <style>
    #snaptarget { height: 300px; background-color: white; background-image: url('http://egords27.edumsko.ru/images/users-files/egords27/ood/132421643034.jpg');}
    .draggable {
        width: 90px;
        height: 80px;
        padding: 5px;
        float: left;
        margin: 0 10px 10px 0;
        font-size: .9em;
        background-image: url('http://7-themes.com/data_images/out/21/6839204-gradient-background.jpg');
    }

    .snap {
        width: 300px;
        height: 100px;
        margin-bottom: 25px;
    }
  </style>

  <script>
    $(function() {
        $(".draggable").draggable({
                snap: ".snap",
                stop: function(event, ui) {
                    /* Get the possible snap targets: */
                    var snapped = $(this).data('draggable').snapElements;

                    /* Pull out only the snap targets that are "snapping": */
                    var snappedTo = $.map(snapped, function(element) {
                        return element.snapping ? element.item : null;
                    });

                    /* Display the results: */
                    var result= '';
                    $.each(snappedTo, function(idx, item) {
                        result += $(item).text() + ", ";
                    });

                    $("#results").html("Snapped to: " + (result === '' ? "Nothing!" : result));
                }
            });
      $( "#draggable" ).draggable({ snap: true });
    });
      function buildSubnet(id){
          var html_string = $('div.snapContainer').html()
          $('div.snapContainer').html(html_string + "<div id='"+ id +"'>" +
                  "<div id='snap-one' class='snap ui-widget-header'>Snap 1</div>"+
                  "<div id='snap-two' class='snap ui-widget-header'>Snap 2</div></div>"
          );
      }
  </script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Dashboard</a></li>
                <li><a href="#" onClick="buildSubnet(this.id);">Add Subnet</a></li>
            </ul>
        </div>
    </div>
</nav>


<div class="container-fluid" style="top:500px;">

    <div class="row">
        <div class="col-sm-9" >
            <h1 class="page-header"></h1>

            <div class="snapContainer">

            </div>

            <br style="clear:both">
            <div id="draggable" class="draggable ui-widget-content">
                <p>Oh Snap!</p>
            </div>
            <div id="draggable" class="draggable ui-widget-content">
                <center>ASG</center>
                <div class="asgGroup">

                </div>
            </div>
            <div id="results"></div>

            </div>
        </div>
    </div>


</body>
</html>

我从一个正在工作的JSFIDLE获得的代码中得到了一个javascript错误，我不确定问题来自何处。我试图理解jquery拖动事件是如何工作的。测试将根据项目的放置位置触发可拖动项目的结果

  <style>
    #snaptarget { height: 300px; background-color: white; background-image: url('http://egords27.edumsko.ru/images/users-files/egords27/ood/132421643034.jpg');}
    .draggable {
        width: 90px;
        height: 80px;
        padding: 5px;
        float: left;
        margin: 0 10px 10px 0;
        font-size: .9em;
        background-image: url('http://7-themes.com/data_images/out/21/6839204-gradient-background.jpg');
    }

    .snap {
        width: 300px;
        height: 100px;
        margin-bottom: 25px;
    }
  </style>

  <script>
    $(function() {
        $(".draggable").draggable({
                snap: ".snap",
                stop: function(event, ui) {
                    /* Get the possible snap targets: */
                    var snapped = $(this).data('draggable').snapElements;

                    /* Pull out only the snap targets that are "snapping": */
                    var snappedTo = $.map(snapped, function(element) {
                        return element.snapping ? element.item : null;
                    });

                    /* Display the results: */
                    var result= '';
                    $.each(snappedTo, function(idx, item) {
                        result += $(item).text() + ", ";
                    });

                    $("#results").html("Snapped to: " + (result === '' ? "Nothing!" : result));
                }
            });
      $( "#draggable" ).draggable({ snap: true });
    });
      function buildSubnet(id){
          var html_string = $('div.snapContainer').html()
          $('div.snapContainer').html(html_string + "<div id='"+ id +"'>" +
                  "<div id='snap-one' class='snap ui-widget-header'>Snap 1</div>"+
                  "<div id='snap-two' class='snap ui-widget-header'>Snap 2</div></div>"
          );
      }
  </script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Dashboard</a></li>
                <li><a href="#" onClick="buildSubnet(this.id);">Add Subnet</a></li>
            </ul>
        </div>
    </div>
</nav>


<div class="container-fluid" style="top:500px;">

    <div class="row">
        <div class="col-sm-9" >
            <h1 class="page-header"></h1>

            <div class="snapContainer">

            </div>

            <br style="clear:both">
            <div id="draggable" class="draggable ui-widget-content">
                <p>Oh Snap!</p>
            </div>
            <div id="draggable" class="draggable ui-widget-content">
                <center>ASG</center>
                <div class="asgGroup">

                </div>
            </div>
            <div id="results"></div>

            </div>
        </div>
    </div>


</body>
</html>

这是正在工作的js小提琴。

  <style>
    #snaptarget { height: 300px; background-color: white; background-image: url('http://egords27.edumsko.ru/images/users-files/egords27/ood/132421643034.jpg');}
    .draggable {
        width: 90px;
        height: 80px;
        padding: 5px;
        float: left;
        margin: 0 10px 10px 0;
        font-size: .9em;
        background-image: url('http://7-themes.com/data_images/out/21/6839204-gradient-background.jpg');
    }

    .snap {
        width: 300px;
        height: 100px;
        margin-bottom: 25px;
    }
  </style>

  <script>
    $(function() {
        $(".draggable").draggable({
                snap: ".snap",
                stop: function(event, ui) {
                    /* Get the possible snap targets: */
                    var snapped = $(this).data('draggable').snapElements;

                    /* Pull out only the snap targets that are "snapping": */
                    var snappedTo = $.map(snapped, function(element) {
                        return element.snapping ? element.item : null;
                    });

                    /* Display the results: */
                    var result= '';
                    $.each(snappedTo, function(idx, item) {
                        result += $(item).text() + ", ";
                    });

                    $("#results").html("Snapped to: " + (result === '' ? "Nothing!" : result));
                }
            });
      $( "#draggable" ).draggable({ snap: true });
    });
      function buildSubnet(id){
          var html_string = $('div.snapContainer').html()
          $('div.snapContainer').html(html_string + "<div id='"+ id +"'>" +
                  "<div id='snap-one' class='snap ui-widget-header'>Snap 1</div>"+
                  "<div id='snap-two' class='snap ui-widget-header'>Snap 2</div></div>"
          );
      }
  </script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Dashboard</a></li>
                <li><a href="#" onClick="buildSubnet(this.id);">Add Subnet</a></li>
            </ul>
        </div>
    </div>
</nav>


<div class="container-fluid" style="top:500px;">

    <div class="row">
        <div class="col-sm-9" >
            <h1 class="page-header"></h1>

            <div class="snapContainer">

            </div>

            <br style="clear:both">
            <div id="draggable" class="draggable ui-widget-content">
                <p>Oh Snap!</p>
            </div>
            <div id="draggable" class="draggable ui-widget-content">
                <center>ASG</center>
                <div class="asgGroup">

                </div>
            </div>
            <div id="results"></div>

            </div>
        </div>
    </div>


</body>
</html>

我将要做一些不同的事情，但它会为我的目的工作。我需要在快照上触发事件，比如为被删除的元素分配ID和名称等。我还需要它来创建另一个元素从下降的情况下，用户需要多个项目，但现在我只是试图了解我的错误是从哪里来的，我不明白什么

  <style>
    #snaptarget { height: 300px; background-color: white; background-image: url('http://egords27.edumsko.ru/images/users-files/egords27/ood/132421643034.jpg');}
    .draggable {
        width: 90px;
        height: 80px;
        padding: 5px;
        float: left;
        margin: 0 10px 10px 0;
        font-size: .9em;
        background-image: url('http://7-themes.com/data_images/out/21/6839204-gradient-background.jpg');
    }

    .snap {
        width: 300px;
        height: 100px;
        margin-bottom: 25px;
    }
  </style>

  <script>
    $(function() {
        $(".draggable").draggable({
                snap: ".snap",
                stop: function(event, ui) {
                    /* Get the possible snap targets: */
                    var snapped = $(this).data('draggable').snapElements;

                    /* Pull out only the snap targets that are "snapping": */
                    var snappedTo = $.map(snapped, function(element) {
                        return element.snapping ? element.item : null;
                    });

                    /* Display the results: */
                    var result= '';
                    $.each(snappedTo, function(idx, item) {
                        result += $(item).text() + ", ";
                    });

                    $("#results").html("Snapped to: " + (result === '' ? "Nothing!" : result));
                }
            });
      $( "#draggable" ).draggable({ snap: true });
    });
      function buildSubnet(id){
          var html_string = $('div.snapContainer').html()
          $('div.snapContainer').html(html_string + "<div id='"+ id +"'>" +
                  "<div id='snap-one' class='snap ui-widget-header'>Snap 1</div>"+
                  "<div id='snap-two' class='snap ui-widget-header'>Snap 2</div></div>"
          );
      }
  </script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Dashboard</a></li>
                <li><a href="#" onClick="buildSubnet(this.id);">Add Subnet</a></li>
            </ul>
        </div>
    </div>
</nav>


<div class="container-fluid" style="top:500px;">

    <div class="row">
        <div class="col-sm-9" >
            <h1 class="page-header"></h1>

            <div class="snapContainer">

            </div>

            <br style="clear:both">
            <div id="draggable" class="draggable ui-widget-content">
                <p>Oh Snap!</p>
            </div>
            <div id="draggable" class="draggable ui-widget-content">
                <center>ASG</center>
                <div class="asgGroup">

                </div>
            </div>
            <div id="results"></div>

            </div>
        </div>
    </div>


</body>
</html>

堆栈跟踪：

Uncaught TypeError: Cannot read property 'snapElements' of undefined

$.draggable.stop @ jquery.gridder.html:37$.Widget._trigger @ jquery-ui.js:815$.widget._trigger @ jquery-ui.js:6513(anonymous function) @ jquery-ui.js:415$.widget._mouseStop @ jquery-ui.js:6126(anonymous function) @ jquery-ui.js:415$.widget._mouseUp @ jquery-ui.js:1018(anonymous function) @ jquery-ui.js:415$.widget._mouseUp @ jquery-ui.js:6148(anonymous function) @ jquery-ui.js:415$.widget._mouseDown._mouseUpDelegate @ jquery-ui.js:959jQuery.event.dispatch @ jquery-1.10.2.js:5095jQuery.event.add.elemData.handle @ jquery-1.10.2.js:4766

  <style>
    #snaptarget { height: 300px; background-color: white; background-image: url('http://egords27.edumsko.ru/images/users-files/egords27/ood/132421643034.jpg');}
    .draggable {
        width: 90px;
        height: 80px;
        padding: 5px;
        float: left;
        margin: 0 10px 10px 0;
        font-size: .9em;
        background-image: url('http://7-themes.com/data_images/out/21/6839204-gradient-background.jpg');
    }

    .snap {
        width: 300px;
        height: 100px;
        margin-bottom: 25px;
    }
  </style>

  <script>
    $(function() {
        $(".draggable").draggable({
                snap: ".snap",
                stop: function(event, ui) {
                    /* Get the possible snap targets: */
                    var snapped = $(this).data('draggable').snapElements;

                    /* Pull out only the snap targets that are "snapping": */
                    var snappedTo = $.map(snapped, function(element) {
                        return element.snapping ? element.item : null;
                    });

                    /* Display the results: */
                    var result= '';
                    $.each(snappedTo, function(idx, item) {
                        result += $(item).text() + ", ";
                    });

                    $("#results").html("Snapped to: " + (result === '' ? "Nothing!" : result));
                }
            });
      $( "#draggable" ).draggable({ snap: true });
    });
      function buildSubnet(id){
          var html_string = $('div.snapContainer').html()
          $('div.snapContainer').html(html_string + "<div id='"+ id +"'>" +
                  "<div id='snap-one' class='snap ui-widget-header'>Snap 1</div>"+
                  "<div id='snap-two' class='snap ui-widget-header'>Snap 2</div></div>"
          );
      }
  </script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Dashboard</a></li>
                <li><a href="#" onClick="buildSubnet(this.id);">Add Subnet</a></li>
            </ul>
        </div>
    </div>
</nav>


<div class="container-fluid" style="top:500px;">

    <div class="row">
        <div class="col-sm-9" >
            <h1 class="page-header"></h1>

            <div class="snapContainer">

            </div>

            <br style="clear:both">
            <div id="draggable" class="draggable ui-widget-content">
                <p>Oh Snap!</p>
            </div>
            <div id="draggable" class="draggable ui-widget-content">
                <center>ASG</center>
                <div class="asgGroup">

                </div>
            </div>
            <div id="results"></div>

            </div>
        </div>
    </div>


</body>
</html>

代码子网测试

  <style>
    #snaptarget { height: 300px; background-color: white; background-image: url('http://egords27.edumsko.ru/images/users-files/egords27/ood/132421643034.jpg');}
    .draggable {
        width: 90px;
        height: 80px;
        padding: 5px;
        float: left;
        margin: 0 10px 10px 0;
        font-size: .9em;
        background-image: url('http://7-themes.com/data_images/out/21/6839204-gradient-background.jpg');
    }

    .snap {
        width: 300px;
        height: 100px;
        margin-bottom: 25px;
    }
  </style>

  <script>
    $(function() {
        $(".draggable").draggable({
                snap: ".snap",
                stop: function(event, ui) {
                    /* Get the possible snap targets: */
                    var snapped = $(this).data('draggable').snapElements;

                    /* Pull out only the snap targets that are "snapping": */
                    var snappedTo = $.map(snapped, function(element) {
                        return element.snapping ? element.item : null;
                    });

                    /* Display the results: */
                    var result= '';
                    $.each(snappedTo, function(idx, item) {
                        result += $(item).text() + ", ";
                    });

                    $("#results").html("Snapped to: " + (result === '' ? "Nothing!" : result));
                }
            });
      $( "#draggable" ).draggable({ snap: true });
    });
      function buildSubnet(id){
          var html_string = $('div.snapContainer').html()
          $('div.snapContainer').html(html_string + "<div id='"+ id +"'>" +
                  "<div id='snap-one' class='snap ui-widget-header'>Snap 1</div>"+
                  "<div id='snap-two' class='snap ui-widget-header'>Snap 2</div></div>"
          );
      }
  </script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Dashboard</a></li>
                <li><a href="#" onClick="buildSubnet(this.id);">Add Subnet</a></li>
            </ul>
        </div>
    </div>
</nav>


<div class="container-fluid" style="top:500px;">

    <div class="row">
        <div class="col-sm-9" >
            <h1 class="page-header"></h1>

            <div class="snapContainer">

            </div>

            <br style="clear:both">
            <div id="draggable" class="draggable ui-widget-content">
                <p>Oh Snap!</p>
            </div>
            <div id="draggable" class="draggable ui-widget-content">
                <center>ASG</center>
                <div class="asgGroup">

                </div>
            </div>
            <div id="results"></div>

            </div>
        </div>
    </div>


</body>
</html>


#snaptarget{高度：300px；背景颜色：白色；背景图像：url（'http://egords27.edumsko.ru/images/users-files/egords27/ood/132421643034.jpg');}
.拖拉{
宽度：90px；
高度：80px；
填充物：5px；
浮动：左；
利润率：0 10px 10px 0；
字体大小：.9em；
背景图像：url（'http://7-themes.com/data_images/out/21/6839204-gradient-background.jpg');
}
.啪{
宽度：300px；
高度：100px；
边缘底部：25px；
}
$（函数（）{
$（“.draggable”）.draggable({
快照：“.snap”，
停止：功能（事件、用户界面）{
/*获取可能的捕捉目标：*/
var snaped=$（this）.data（'draggable'）.snapElements；
/*仅拉出正在“捕捉”的捕捉目标：*/
var snapedto=$.map（已捕捉，函数（元素）{
返回element.snapping？element.item:空；
});
/*显示结果：*/
var结果=“”；
$。每个（捕捉到，函数（idx，项）{
结果+=$（项）.text（）+“，”；
});
$（“#results”）.html（“捕捉到：+（result==”？“Nothing！”：result））；
}
});
$（“#draggable”）.draggable（{snap:true}）；
});
函数生成子网（id）{
var html_string=$（'div.snapContainer'）.html（）
$（'div.snapContainer'）.html（html_字符串+“”+
“快照1”+
“快照2”
);
}
切换导航






哦，快
  <style>
    #snaptarget { height: 300px; background-color: white; background-image: url('http://egords27.edumsko.ru/images/users-files/egords27/ood/132421643034.jpg');}
    .draggable {
        width: 90px;
        height: 80px;
        padding: 5px;
        float: left;
        margin: 0 10px 10px 0;
        font-size: .9em;
        background-image: url('http://7-themes.com/data_images/out/21/6839204-gradient-background.jpg');
    }

    .snap {
        width: 300px;
        height: 100px;
        margin-bottom: 25px;
    }
  </style>

  <script>
    $(function() {
        $(".draggable").draggable({
                snap: ".snap",
                stop: function(event, ui) {
                    /* Get the possible snap targets: */
                    var snapped = $(this).data('draggable').snapElements;

                    /* Pull out only the snap targets that are "snapping": */
                    var snappedTo = $.map(snapped, function(element) {
                        return element.snapping ? element.item : null;
                    });

                    /* Display the results: */
                    var result= '';
                    $.each(snappedTo, function(idx, item) {
                        result += $(item).text() + ", ";
                    });

                    $("#results").html("Snapped to: " + (result === '' ? "Nothing!" : result));
                }
            });
      $( "#draggable" ).draggable({ snap: true });
    });
      function buildSubnet(id){
          var html_string = $('div.snapContainer').html()
          $('div.snapContainer').html(html_string + "<div id='"+ id +"'>" +
                  "<div id='snap-one' class='snap ui-widget-header'>Snap 1</div>"+
                  "<div id='snap-two' class='snap ui-widget-header'>Snap 2</div></div>"
          );
      }
  </script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Dashboard</a></li>
                <li><a href="#" onClick="buildSubnet(this.id);">Add Subnet</a></li>
            </ul>
        </div>
    </div>
</nav>


<div class="container-fluid" style="top:500px;">

    <div class="row">
        <div class="col-sm-9" >
            <h1 class="page-header"></h1>

            <div class="snapContainer">

            </div>

            <br style="clear:both">
            <div id="draggable" class="draggable ui-widget-content">
                <p>Oh Snap!</p>
            </div>
            <div id="draggable" class="draggable ui-widget-content">
                <center>ASG</center>
                <div class="asgGroup">

                </div>
            </div>
            <div id="results"></div>

            </div>
        </div>
    </div>


</body>
</html>

ASG

.data（'draggable'）

在jquery ui的较新版本中被重命名为

.data（'ui-draggable'）

，可能与

  <style>
    #snaptarget { height: 300px; background-color: white; background-image: url('http://egords27.edumsko.ru/images/users-files/egords27/ood/132421643034.jpg');}
    .draggable {
        width: 90px;
        height: 80px;
        padding: 5px;
        float: left;
        margin: 0 10px 10px 0;
        font-size: .9em;
        background-image: url('http://7-themes.com/data_images/out/21/6839204-gradient-background.jpg');
    }

    .snap {
        width: 300px;
        height: 100px;
        margin-bottom: 25px;
    }
  </style>

  <script>
    $(function() {
        $(".draggable").draggable({
                snap: ".snap",
                stop: function(event, ui) {
                    /* Get the possible snap targets: */
                    var snapped = $(this).data('draggable').snapElements;

                    /* Pull out only the snap targets that are "snapping": */
                    var snappedTo = $.map(snapped, function(element) {
                        return element.snapping ? element.item : null;
                    });

                    /* Display the results: */
                    var result= '';
                    $.each(snappedTo, function(idx, item) {
                        result += $(item).text() + ", ";
                    });

                    $("#results").html("Snapped to: " + (result === '' ? "Nothing!" : result));
                }
            });
      $( "#draggable" ).draggable({ snap: true });
    });
      function buildSubnet(id){
          var html_string = $('div.snapContainer').html()
          $('div.snapContainer').html(html_string + "<div id='"+ id +"'>" +
                  "<div id='snap-one' class='snap ui-widget-header'>Snap 1</div>"+
                  "<div id='snap-two' class='snap ui-widget-header'>Snap 2</div></div>"
          );
      }
  </script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Dashboard</a></li>
                <li><a href="#" onClick="buildSubnet(this.id);">Add Subnet</a></li>
            </ul>
        </div>
    </div>
</nav>


<div class="container-fluid" style="top:500px;">

    <div class="row">
        <div class="col-sm-9" >
            <h1 class="page-header"></h1>

            <div class="snapContainer">

            </div>

            <br style="clear:both">
            <div id="draggable" class="draggable ui-widget-content">
                <p>Oh Snap!</p>
            </div>
            <div id="draggable" class="draggable ui-widget-content">
                <center>ASG</center>
                <div class="asgGroup">

                </div>
            </div>
            <div id="results"></div>

            </div>
        </div>
    </div>


</body>
</html>