Splitting node from parent node in JavaScript DOM - javascript

I have DOM HTML like this
<div class="width_medium">
<p>Text 1</p>
<p>Text 2</p>
<div class="video">Video</div>
<p>Text 3</p>
<p>Text 4</p>
</div>
And I want move away div class "video" from div "width_medium". Result will like this
<div class="width_medium">
<p>Text 1</p>
<p>Text 2</p>
</div>
<div class="width_medium">
<div class="video">Video</div>
</div>
<div class="width_medium">
<p>Text 3</p>
<p>Text 4</p>
</div>
How can I do that with jQuery?


$(".video").unwrap();
$(".video").prevAll('p').wrapAll("<div class=width_medium></div>")
$(".video").nextAll('p').wrapAll("<div class=width_medium></div>")
$(".video").wrap("<div class=width_medium></div>")
.width_medium p {
background-color: blue
}
.width_medium .video {
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="width_medium">
<p>Text 1</p>
<p>Text 2</p>
<div class="video">Video</div>
<p>Text 3</p>
<p>Text 4</p>
</div>
Unwrap the elements.
Use .prevAll() and .nextAll() and .wrapAll() to wrapp all prev and next p
Use .wrap() for the class video
UPDATE
Dont unwrap at first follow previous step then add .parent() to .video then use unwrap()
$(".video").prevAll('p').wrapAll("<div class=width_medium></div>")
$(".video").nextAll('p').wrapAll("<div class=width_medium></div>")
$(".video").wrap("<div class=width_medium></div>")
$(".video").parent().unwrap();
.width_medium p {
background-color: blue
}
.width_medium .video {
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="width_medium">
<p>Text 1</p>
<p>Text 2</p>
<div class="video">Video</div>
<p>Text 3</p>
<p>Text 4</p>
</div>

Related

How to show nth div when click nth p tag using jQuery

I have a structure like this
<div>
<p></p> 1
<p></p> 2
<p></p> 3
<p></p> 4
<p></p> 5
. .
. .
. .
</div>
<div></div> 1
<div></div> 2
<div></div> 3
<div></div> 4
<div></div> 5
.. ..
.. ..
.. ..
There are exactly equal number of p tags and div tags( don't consider the div containing the p itself)
Initially all the <div></div> are hidden (Except the div containing <p></p> tags)
Question:
1) I want that when the nth p tag is clicked I want to show nth div.

You can consider the text inside the element. You can match the index of clicked p element based on which you can show the specific div element:
$('p').click(function(){
var index = $(this).index();
$('div').not('.pContainer').eq(index).show();
})
div{display: none;}
.pContainer{display: block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pContainer">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
*********
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

try this and let me know if it worked
function paraClick(index) {
$('.p_click').css('display','none')
$('.p_click').eq(index).css('display','block')
}
.p_click{display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<p onclick="paraClick(0)">P 1</p>
<p onclick="paraClick(1)">P 2</p>
<p onclick="paraClick(2)">P 3</p>
<p onclick="paraClick(3)">P 4</p>
<p onclick="paraClick(4)">P 5</p>
</div>
<div class="p_click">D 1</div>
<div class="p_click">D 2</div>
<div class="p_click">D 3</div>
<div class="p_click">D 4</div>
<div class="p_click">D 5</div>

Active Sidebar Navigation behaves strange in mobile preview

I have an active sidebar navigation, which is not moving up with all the website content when you scroll down the page.
My problem is, that it is working the way I want it to work on a desktop browser, but it jumps up and down and doesn't allow any scrolling as soon as I decrease the browser size or run it as a mobile preview (Chrome Developer Tools)
Here is a: jsfiddle, which unfortunately doesn't work. But the code below works fine! You can just copy it into an html file.
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- Side Navbar -->
<div class="container">
<div class="row">
<!--left-->
<div class="col-md-3" id="leftCol">
<ul class="nav nav-stacked" id="sidebar">
<li>
<div id="sideBarLogo">
<a href="#">
<img class="img-responsive" style="display:inline-block; height:120px; margin-top:200px" src="images/logo.png" alt="Logo">
<br><br><br><br>
</a>
</div>
</li>
<li><p class="raleway">Menu 1</p></li>
<li><p class="raleway">Menu 2</p></li>
<li><p class="raleway">Menu 3</p></li>
<li><p class="raleway">Menu 4</p></li>
<li><p class="raleway">Menu 5</p></li>
</ul>
</div>
<!--/left-->
<!--right-->
<div class="col-md-9">
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<br><br><br><br><br>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<br><br><br><br><br>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<br><br><br><br><br>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<br><br><br><br><br>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<br><br><br><br><br>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<br><br><br><br><br>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<br><br><br><br><br>
</div>
</div>
</div>
</body>
</html>
<script>
/* activate sidebar */
$('#sidebar').affix({
offset: {
top: 235
}
});
</script>
If somebody knows a solution, I appreciate it alot. Many thank in advance!

How do I find an element with a specific class and CSS style using jQuery?

Here is what the code looks like:
<div class='class1'>
<div class='class2'>
<div class='class3'>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5' style="display:block;">
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
</div>
</div>
</div>
I want to get the div with class5 and CSS property display set to block. Once I have this div I want to perform further action on that div. I tried using something like
$('.class1 .class2 .class3 .class4').find( '.class5').is(':visible')
but it doesn't work.

The problem you have is that is() returns a Boolean, reflecting whether the passed-in element (or the first of the passed-in elements) matches the supplied argument.
If you switch to filter(), which filters the passed-in collection according to the supplied argument; if the element matches then that element is retained, otherwise it's discarded:
let classFiveElems = $('.class1 .class2 .class3 .class4 .class5').filter( ':visible');
console.log(classFiveElems);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='class1'>
<div class='class2'>
<div class='class3'>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5' style="display:block;">
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
</div>
</div>
</div>
What you want, though, is not just a simple check for visibility; but a test for a specific CSS property; so I'd suggest the following, which uses filter() but using the anonymous function:
let classFiveElems = $('.class1 .class2 .class3 .class4 .class5').filter(function() {
return this.style.display === 'block';
}).addClass('found');
console.log(classFiveElems);
.found {
color: #f90;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='class1'>
<div class='class2'>
<div class='class3'>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5' style="display:block;">
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
</div>
</div>
</div>
References:
filter().
find().
is().

As example:
if($('.class1 .class2 .class3 .class4')
.find( '.class5:first')
.is(':visible')){
console.log('yes');
}
See: https://jsbin.com/ninovic/edit?html,js,console,output

.is() returns a boolean, you can use the pseudo-selector inside find() to select the element:
$('.class1 .class2 .class3 .class4').find('.class5:visible')
Example

$('.class5').each(function(){
if ($(this).is(":visible")) {
//What you want to do
}
});

You can do it directly
alert('is visible?', $( '.class5').is(':visible'));

Actually every div with class5 class has a display: block property.
display: block property is a default state of every block element (divs are block elements).
I've set the display property of other divs to none, just to show functionality of following code.
$('div').each(function() {
if ($(this).hasClass('class5') && $(this).is(":visible")) {
console.log($(this).html());
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='class1'>
<div class='class2'>
<div class='class3'>
<div class='class4'>
<div class='class5' style="display:none;">
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5' style="display:none;">
<p>Some text 2</p>
</div>
</div>
<div class='class4'>
<div class='class5' value='t' style="display:block;">
<p>Some text 3</p>
</div>
</div>
<div class='class4'>
<div class='class5' style="display:none;">
<p>Some text 4</p>
</div>
</div>
</div>
</div>
</div>

This will return the .class5 having display:block property. IN Your case it will return all the elements. because all div in div contains default display property block, So it will return all of them in your case. and if you try then you have assure that only the elements(.class5) you want to select have display block property.
var selector = $('.class1 .class2 .class3 .class4').find( '.class5').filter(function() {
return $(this).css('display') == 'block';
});

Scroll in one item is affecting another item in bootstrap carousel

In my page I've a carousel and four items inside of that carousel.
All items have some big lists and scrolling in one item is automatically scrolling other item.
I don't want other items to be scrolling automatically they should be at their position until scrolled, How to do that?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
</div>
<div class="item">
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
</div>
<div class="item">
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item3</p>
<p>Item 3</p>
<p>Item3</p>
</div>
<div class="item">
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>

It's because you're scrolling on the web page, not inside carousel...
Here is one way, just have to set a max-height to the carousel items.
CSS:
.carousel .item {max-height:300px;overflow:auto;}
Bootply : http://www.bootply.com/c0k8PpJ6PP
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
.carousel .item {max-height:300px;overflow:auto;}
</style>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
<p>Item 1</p>
</div>
<div class="item">
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item 2</p>
<p>Item2</p>
</div>
<div class="item">
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item 3</p>
<p>Item3</p>
<p>Item 3</p>
<p>Item3</p>
</div>
<div class="item">
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
<p>Item 4</p>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>

Merging 2 div content on drag and drop of div on one another using jquery

I need a jquery code for following scenario.
there are 4 div's, any one can be dragged and dropped on other.
while dropping the content of DIV1 and DIV2 should get merged.
Merged content also can be pulled out from and put back to origial div
my code is some thing like this.
<div id ="f1">
<p id="c1">content 1</p>
</div>
<div id ="f2">
<p id="c2">content 2</p>
</div>
<div id ="f3">
<p id="c3">content 3</p>
</div>
<div id ="f4">
<p id="c4">content 4</p>
</div>
if i drag f2 on f1 then in f1 i should find both c1 and c2 like this
<div id ="f1">
<p id="c1">content 1</p>
<p id="c2">content 2</p>
</div>
<div id ="f3">
<p id="c3">content 3</p>
</div>
<div id ="f4">
<p id="c4">content 4</p>
</div>
now i should able to pull out c2 and put it any other div also. like this..
<div id ="f1">
<p id="c1">content 1</p>
</div>
<div id ="f3">
<p id="c3">content 3</p>
</div>
<div id ="f4">
<p id="c4">content 4</p>
<p id="c2">content 2</p>
</div>
Please help me out. thanks in advance.

I have managed to write some code for this. On the browser console I could see the tags getting dragged around but on the UI itself the effect was not crystal clear.
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
$('#'+ev.target.id).parent().append($('#'+data));
}
</script>
<div id ="f1">
<p id="c1" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">content 1</p>
</div>
<div id ="f2">
<p id="c2" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">content 2</p>
</div>
<div id ="f3">
<p id="c3" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">content 3</p>
</div>
<div id ="f4">
<p id="c4" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">content 4</p>
</div>

Categories

Resources