Issue
I am trying to setup nested DIVs to be sortable with JQuery, but it does not work. Below is the code I am using and here is the link to JSFiddle
<div class="noDvi lay01">
<div class="moveDvi">
test 01
</div>
<div class="noMove lay01">
<div class="moveDvi">
test 02
</div>
<div class="noMove lay01">
<div class="moveDvi">
test 03
</div>
<div class="noMove lay01">
<div class="moveDvi">
test 04
</div>
</div>
</div>
</div>
</div>
$(".moveDvi").sortable({
connectwith: ".noMove",
placeholder: "placeHolder",
});
Solution
You have a typo in your code: connectwith should be connectWith. connectWith is used to specify which lists can the current list be connected with. So it should typically point to a container and not individual items. You'll need to include both jQuery and jQuery UI libraries for this to work. If you want to make nested items sortable, you might want to initialize sortable on the container elements, not just the items.
<html>
<head>
<link
rel="stylesheet"
href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.lay01 {
margin-left: 10px;
}
.placeHolder {
border-style: dashed;
border-color: #e09d9d;
height: 15px;
}
</style>
</head>
<body>
<div class="sortableContainer noDvi lay01">
<div class="moveDvi">test 01</div>
<div class="sortableContainer noMove lay01">
<div class="moveDvi">test 02</div>
<div class="sortableContainer noMove lay01">
<div class="moveDvi">test 03</div>
<div class="sortableContainer noMove lay01">
<div class="moveDvi">test 04</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(".sortableContainer").sortable({
items: ".moveDvi",
connectWith: ".sortableContainer",
placeholder: "placeHolder",
});
</script>
</html>Answered By - Isha Padalia
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.