javascript - Draw arrow between two flex items

I want the arrow to be inserted between two flex items as they are added(Please run the code). It must be added after the first flex item for every added flex item between them so that they appear connected by the arrow. The arrow must be at the midpoint of box boundaries ( not box centre) connecting them.

$('#clickMe').click(function() {
    $('#Demosss').append($('<li  class="flex-item">').text('text'))
    $(this).insertAfter($('[class^="flex-item"]').last());
});

$(document).on('click', '.flex-item' ,function(){
  $(this).toggleClass('flexActive')
})

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    -webkit-flex-direction: row; /* Safari */
    flex-direction:  row;
    flex-wrap:  wrap;
}
.flex-item {
    background: green;
    padding: 5px;
    width: 100px;
    height: 150px;
    margin-top: 10px;
    margin-right: 15px;
    line-height: 150px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
    display: inline-block;
    
}
.flexActive{
  width:auto;
  display:block;
  flex: 1 1;
  margin-right:0;
}

ul li{
  display: inline;
}




.enlarge{
 zoom: 350%;
}

<script src=".1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container">

<!-- add LI here -->
</ul>


<button id="clickMe">Click Me</button>

<div class="enlarge">
<span>&#8674;</span>
</div>

$('#clickMe').click(function() {
    $('#Demosss').append($('<li  class="flex-item">').text('text'))
    $(this).insertAfter($('[class^="flex-item"]').last());
});

$(document).on('click', '.flex-item' ,function(){
  $(this).toggleClass('flexActive')
})

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    -webkit-flex-direction: row; /* Safari */
    flex-direction:  row;
    flex-wrap:  wrap;
}
.flex-item {
    background: green;
    padding: 5px;
    width: 100px;
    height: 150px;
    margin-top: 10px;
    margin-right: 15px;
    line-height: 150px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
    display: inline-block;
    
}
.flexActive{
  width:auto;
  display:block;
  flex: 1 1;
  margin-right:0;
}

ul li{
  display: inline;
}




.enlarge{
 zoom: 350%;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container">

<!-- add LI here -->
</ul>


<button id="clickMe">Click Me</button>

<div class="enlarge">
<span>&#8674;</span>
</div>

Share Improve this question asked Feb 28, 2017 at 4:20 HiddenMarkow 6131 gold badge8 silver badges19 bronze badges

4 Like this? codepen.io/anon/pen/vxNEjo – Michael Coker Commented Feb 28, 2017 at 4:29
1 @MichaelCoker add it as an answer. and remove the last one – Death-is-the-real-truth Commented Feb 28, 2017 at 4:32

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

You can use a pseudo element with the arrow as content, and to exclude it from the first element, use :not() in your CSS.

$('#clickMe').click(function() {
    $('#Demosss').append($('<li  class="flex-item">').text('text'))
    $(this).insertAfter($('[class^="flex-item"]').last());
});

$(document).on('click', '.flex-item' ,function(){
  $(this).toggleClass('flexActive')
})

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  -webkit-flex-direction: row;
  /* Safari */
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-item {
  background: green;
  padding: 5px;
  width: 100px;
  height: 150px;
  margin-top: 10px;
  margin-right: 15px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  display: inline-block;
  position: relative;
}

.flexActive {
  width: auto;
  display: block;
  flex: 1 1;
  margin-right: 0;
}

ul li {
  display: inline;
}

.flex-item:not(:first-child) {
  margin-left: .75em;
}

.flex-item:not(:first-child):before {
  content: '\21E2';
  color: black;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-100%, -50%);
  z-index: 1;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container"></ul>

<button id="clickMe">Click Me</button>

Remove the horizontal margins between your block elements, and then conditionally append the arrow before each inserted block when you detect that at least one block has already been added.

var first = true

$('#clickMe').click(function() {
    var demos = $('#Demosss')
    if (!first) {
      demos.append('&#8674;')
    } else first = false
    demos.append($('<li class="flex-item">').text('text'))
    $(this).insertAfter($('.flex-item').last());
});

$(document).on('click', '.flex-item', function (){
  $(this).toggleClass('flexActive')
})

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    -webkit-flex-direction: row; /* Safari */
    flex-direction:  row;
    flex-wrap:  wrap;
}
.flex-item {
    background: green;
    padding: 5px;
    width: 100px;
    height: 150px;
    margin-top: 10px;
    line-height: 150px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
    display: inline-block;
    
}
.flexActive{
  width:auto;
  display:block;
  flex: 1 1;
  margin-right:0;
}

ul li{
  display: inline;
}




.enlarge{
 zoom: 350%;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container">

<!-- add LI here -->
</ul>


<button id="clickMe">Click Me</button>

<div class="enlarge">
</div>

Try to something like this.

$('#clickMe').click(function() {
		    $('#Demosss').append($('<li  class="flex-item">').text('text'))
		    $('.enlarge').css('display','none');
		    $('#Demosss').append($('<div class="enlarge1"><span>&#8674;</span></div>'))
		    $(this).insertAfter($('[class^="flex-item"]').last());
		});

		$(document).on('click', '.flex-item' ,function(){
		  $(this).toggleClass('flexActive')
		})

.flex-container {
	    padding: 0;
	    margin: 0;
	    list-style: none;
	    -webkit-flex-direction: row; /* Safari */
	    flex-direction:  row;
	    flex-wrap:  wrap;
	}
	.flex-item {
	    background: green;
	    padding: 5px;
	    width: 100px;
	    height: 150px;
	    margin-top: 10px;
	    margin-right: 15px;
	    line-height: 150px;
	    color: white;
	    font-weight: bold;
	    font-size: 3em;
	    text-align: center;
	    display: inline-block;
	    
	}
	.flexActive{
	  width:auto;
	  display:block;
	  flex: 1 1;
	  margin-right:0;
	}

	ul li{
	  display: inline;
	}


	.enlarge1{
		zoom: 350%;
	}

	.enlarge{
	 zoom: 350%;
	}

<!-- jQuery library -->
	<script src="https://ajax.googleapis./ajax/libs/jquery/3.1.1/jquery.min.js"></script>

	<!-- Latest piled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul id="Demosss" class="flex-container">

	<!-- add LI here -->
	</ul>


	<button id="clickMe">Click Me</button>
	<div class="enlarge"><span>&#8674;</span></div>
	<div class="arrow">
	</div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Draw arrow between two flex items - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)