Jquery 拖放可排序引导网格组织结构图
我使用bootstrap的网格和jqueryui为拖放可排序网格功能制作了一个组织结构图。我想要实现的是使用拖放排序表交换每个项目的位置。我的问题是,我似乎无法使它工作,布局混乱。以下是我迄今为止所做的尝试: HTMLJquery 拖放可排序引导网格组织结构图,jquery,html,css,twitter-bootstrap,jquery-ui,Jquery,Html,Css,Twitter Bootstrap,Jquery Ui,我使用bootstrap的网格和jqueryui为拖放可排序网格功能制作了一个组织结构图。我想要实现的是使用拖放排序表交换每个项目的位置。我的问题是,我似乎无法使它工作,布局混乱。以下是我迄今为止所做的尝试: HTML <div class="container noah-family-tree-container"> <div class="row noah-family-header"> <div class="col-md-12">
<div class="container noah-family-tree-container">
<div class="row noah-family-header">
<div class="col-md-12">
<p> MY NOAH FAMILY </p>
</div>
<div class="underline"> </div>
</div>
<div class="row noah-family-tree grid">
<div class="tree-head img-tree grow push">
<a href="#" class="button tree-parent ">
<img src="images/female-img.png" class="img-responsive">
<p>Goldilocks</p>
</a>
</div>
</div>
<div id="child-content">
<div class="row">
<div class="tree-line-vertical"></div>
<div class="tree-line-horizontal"></div>
</div>
<div class="row tree-row tree-child">
<div class="col-md-4 col-sm-4 col-xs-4 img-tree grow push">
<a href="#" class="button tree-child1 ">
<img src="images/bear-img.png" class="img-responsive">
<p>Papa Bear</p>
</a>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 img-tree grow push">
<a href="#" class="button tree-child2 "> <img src="images/bear-img.png" class="img-responsive">
<p>Mama Bear</p>
</a>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 img-tree grow push">
<a href="#" class="button tree-child3 "> <img src="images/bear-img.png" class="img-responsive">
<p>Baby Bear</p>
</a>
</div>
</div>
</div>
<div id="grandchild-content1">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4 family-tree-line">
<div class="tree-line-vertical"></div><div class="tree-line-horizontal2"></div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 img-tree"> </div>
<div class="col-md-4 col-sm-4 col-xs-4 img-tree"> </div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push">
<a href="#" class="button "> <img src="images/bear-img.png" class="img-responsive">
<p>Harold Honey</p>
</a>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push">
<a href="#" class="button "> <img src="images/bear-img.png" class="img-responsive">
<p>Patrick Porriage</p>
</a>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 img-tree grow push"> </div>
</div>
</div>
<div id="grandchild-content2">
<div class="row">
<div class="col-md-12 img-tree">
<div class="tree-line-vertical"></div>
<div class="tree-line-horizontal2-2"></div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push"> </div>
<div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push">
<a href="#" class="button ">
<img src="images/bear-img.png" class="img-responsive">
<p>Harold Honey</p>
</a>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push">
<a href="#" class="button ">
<img src="images/bear-img.png" class="img-responsive">
<p>Patrick Porriage</p>
</a>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push"> </div>
</div>
</div>
<div id="grandchild-content3">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4 family-tree-line"> </div>
<div class="col-md-4 col-sm-4 col-xs-4 img-tree"> </div>
<div class="col-md-4 col-sm-4 col-xs-4 img-tree content3-line">
<div class="tree-line-vertical"></div><div class="tree-line-horizontal2"></div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 img-tree grow push"> </div>
<li>
<div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push">
<a href="#" class="button ">
<img src="images/bear-img.png" class="img-responsive">
<p>Harold Honey</p>
</a>
</div>
</li>
<div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push">
<a href="#" class="button ">
<img src="images/bear-img.png" class="img-responsive">
<p>Patrick Porriage</p>
</a>
</div>
</div>
</div>
屏幕截图
小提琴
一个在线演示,演示您迄今为止对这些图像和引导所做的一切,将帮助那些试图帮助您的人。您解决问题了吗?你可能会发布你的代码吗?
$(function () {
$(".grid").sortable({
tolerance: 'pointer',
revert: 'invalid',
placeholder: 'span2 well placeholder tile',
forceHelperSize: true
});
});