如何在两个容器之间拖放选项卡

时间：2018-02-21 13:43:56

标签： html css jquery-ui

我有两个标签容器（面板？），每个容器有多个标签。我希望能够将一个选项卡从容器1拖放到容器2中。

Here你可以找到一个带有多个标签的单个容器的jQuery UI示例，你可以拖动一个标签并放入另一个位置。

我希望能够将容器外的一个标签移动到另一个容器中。

只是按照建议添加一些代码段：

＆＃13;
＆＃13; 
$( function() {

	var tabs1 = $( "#tabs1" ).tabs();
	tabs1.find( ".ui-tabs-nav" ).sortable({
		axis: "x",
		stop: function() {
			tabs1.tabs( "refresh" );
		}
	});

	var tabs2 = $( "#tabs2" ).tabs();
	tabs2.find( ".ui-tabs-nav" ).sortable({
		axis: "x",
		stop: function() {
			tabs2.tabs( "refresh" );
		}
	});

} );
＆＃13; 
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />


<div id="tabs1">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis.</p>
    <p>Duis cursus.</p>
  </div>
</div>

<div id="tabs2">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis.</p>
    <p>Duis cursus.</p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我使用bootstrap和jQuery，但也可能接受其他解决方案。

由于

2 个答案:

答案 0 :(得分：0)

尝试以下代码段，可能您需要修改一些代码。但它会帮助你得到答案。

＆＃13;
＆＃13; 
$(function() {

  var tabs1 = $("#tabs1").tabs();
  tabs1.find(".ui-tabs-nav").sortable({
    axis: "x",
    stop: function() {
      tabs1.tabs("refresh");
    }
  });

  var tabs2 = $("#tabs2").tabs();
  tabs2.find(".ui-tabs-nav").sortable({
    axis: "x",
    stop: function() {
      tabs2.tabs("refresh");
    }
  });

  $('[data-accepts]').each(function() {
    $(this).draggable({
      containment: $(this).attr('data-droppable')
    });
  });

  $('[data-droppable]').each(function() {
    $(this).droppable({
      accept: $(this).attr('data-accepts'),
      classes: {
        "ui-droppable-active": "ui-state-active",
        "ui-droppable-hover": "ui-state-hover"
      },
      drop: function(event, ui) {
        //$(event.target).append(ui.draggable);
        var $x = ui.draggable;
        $x.appendTo($(event.target)).css({
          top: 0,
          left: 0
        });
      }
    });
  });


});
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />


<div id="tabs1">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1" data-droppable="#tabs-11" data-accepts="#tabs-1">
    <p>Proin elit arcu, rutrum commodo first.</p>
  </div>
  <div id="tabs-2" data-droppable="#tabs-22" data-accepts="#tabs-2">
    <p>Morbi tincidunt first.</p>
  </div>
  <div id="tabs-3" data-droppable="#tabs-33" data-accepts="#tabs-3">
    <p>Mauris eleifend est et turpis first.</p>
    <p>Duis cursus.</p>
  </div>
</div>

<div id="tabs2">
  <ul>
    <li><a href="#tabs-11">Nunc tincidunt</a></li>
    <li><a href="#tabs-22">Proin dolor</a></li>
    <li><a href="#tabs-33">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-11" data-droppable="#tabs-11" data-accepts="#tabs-1">
    <p>Proin elit arcu, rutrum commodo.</p>
  </div>
  <div id="tabs-22" data-droppable="#tabs-22" data-accepts="#tabs-2">
    <p>Morbi tincidunt.</p>
  </div>
  <div id="tabs-33" data-droppable="#tabs-33" data-accepts="#tabs-3">
    <p>Mauris eleifend est et turpis.</p>
    <p>Duis cursus.</p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

这是我对自己帖子的回答，使用基于@Rohan Kumar答案的jQueryUI。

只有一个小故障，你必须稍微摇动一下移动的标签，这样标签就可以自己重绘（如果我能找到答案的话，我会编辑我的答案缺陷）。

＆＃13;
＆＃13; 
$( function() {



	var tabs1 = $( "#tabs1" ).tabs();
	tabs1.find( ".ui-tabs-nav" ).sortable({
		axis: "x, y",
		connectWith: ".connectedSortable",
		stop: function() {
			tabs1.tabs( "refresh" );
		}
	}).droppable({
      drop: function( event, ui) {
				var panelId = $(ui.draggable[0]).attr( "aria-controls" );
				let panel = $( "#" + panelId );
				let p1id = panel.parent().attr("id");

				let newParent = $( event.target.offsetParent );
				let p2id = newParent.attr("id");

				if(p1id !== p2id) {
					panel.attr("style", "display: none");
					panel.attr("aria-hidden", "true");
					panel.detach().appendTo(newParent);

					let tabraw = ui.draggable[0];
					let tab = $( tabraw );

					tabs1.tabs("refresh");

				}
      }
    });



	// Close icon: removing the tab on click
	tabs1.on( "click", "span.ui-icon-close", function() {
		var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
		$( "#" + panelId ).remove();
		tabs1.tabs( "refresh" );
	});



var tabs2 = $( "#tabs2" ).tabs();
	tabs2.find( ".ui-tabs-nav" ).sortable({
		axis: "x, y",
		connectWith: ".connectedSortable",
		stop: function() {
			tabs2.tabs( "refresh" );
		}
	}).droppable({
      drop: function( event, ui) {
				var panelId = $(ui.draggable[0]).attr( "aria-controls" );
				let panel = $( "#" + panelId );
				let p1id = panel.parent().attr("id");

				let newParent = $( event.target.offsetParent );
				let p2id = newParent.attr("id");

				if(p1id !== p2id) {
					panel.attr("style", "display: none");
					panel.attr("aria-hidden", "true");
					panel.detach().appendTo(newParent);

					let tabraw = ui.draggable[0];
					let tab = $( tabraw );

					tabs2.tabs( "refresh" );
				}
      }
    });

	// Close icon: removing the tab on click
	tabs2.on( "click", "span.ui-icon-close", function() {
		var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
		$( "#" + panelId ).remove();
		tabs2.tabs( "refresh" );
	});
    
  
  
  } );
＆＃13; 
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />



<div id="tabs1">
  <ul class="connectedSortable">
    <li><a href="#tabs-11">tabs-11</a></li>
    <li><a href="#tabs-12">tabs-12</a></li>
  </ul>
  <div id="tabs-11">
    <p>tabs-11</p>
  </div>
  <div id="tabs-12">
    <p>tabs-12</p>
  </div>
</div>

<div id="tabs2">
  <ul class="connectedSortable">
    <li><a href="#tabs-21">tabs-21</a></li>
    <li><a href="#tabs-22">tabs-22</a></li>
  </ul>
  <div id="tabs-21">
    <p>tabs-21</p>
  </div>
  <div id="tabs-22">
    <p>tabs-22</p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题