I want to implement the functionality something like Example 1.3 given on this website . Please help with that.
Here is a working example demo using the demo page
for html
<div id="example-1-3">
<div class="column left first">
<ul class="sortable-list">
<li class="sortable-item">Sortable item A</li>
<li class="sortable-item">Sortable item B</li>
</ul>
</div>
<div class="column left">
<ul class="sortable-list">
<li class="sortable-item">Sortable item C</li>
<li class="sortable-item">Sortable item D</li>
</ul>
</div>
<div class="column left">
<ul class="sortable-list">
<li class="sortable-item">Sortable item E</li>
</ul>
</div>
<div class="clearer"> </div>
</div>
for js
$(document).ready(function(){
// Example 1.3: Sortable and connectable lists with visual helper
$('#example-1-3 .sortable-list').sortable({
connectWith: '#example-1-3 .sortable-list',
placeholder: 'placeholder',
});
});
From the code on the page you've mentioned:
// Example 1.3: Sortable and connectable lists with visual helper
$('#example-1-3 .sortable-list').sortable({
connectWith: '#example-1-3 .sortable-list',
placeholder: 'placeholder',
});
Just set the connectWith
to an #id or .class and that's it. The HTML (as seen in the demo on the link) for it would be:
<div id="example-1-3">
<div class="column left first">
<ul class="sortable-list">
<li class="sortable-item">Sortable item A</li>
<li class="sortable-item">Sortable item B</li>
</ul>
</div>
<div class="column left">
<ul class="sortable-list">
<li class="sortable-item">Sortable item C</li>
<li class="sortable-item">Sortable item D</li>
</ul>
</div>
<div class="column left">
<ul class="sortable-list">
<li class="sortable-item">Sortable item E</li>
</ul>
</div>
<div class="clearer"> </div>
</div>
Check with the below link if it works with you. Fiddle
$(".DragItem").draggable({
revert: 'invalid',
helper: "clone"
});
$(".drop1").droppable({
accept: '.drag1',
activeClass: 'DropTargetValid',
drop: function (ev, ui) {
$(ev.target).append(ui.draggable.clone());
}
});
$(".drop2").droppable({
accept: '.drag2',
activeClass: 'DropTargetValid',
drop: function (ev, ui) {
$(ev.target).append(ui.draggable.clone());
}
});
$(function(){ $('html').niceScroll({cursorcolor:"#639BF6",cursorwidth :10, cursorborder: 'none'}); //dad simple demo $('.dad').dad(); })
<script src="http://konsolestudio.com/dad/jquery.min.js"></script> <script src="http://konsolestudio.com/source/jquery.dad.js"></script> <script src="http://konsolestudio.com/dad/jquery.nicescroll.min.js"></script> <link href="http://konsolestudio.com/source/jquery.dad.css" rel="stylesheet"/> <link href="http://konsolestudio.com/dad/demo.css" rel="stylesheet"/> <div id="daddy" class="dad"> <div> <div>1</div> </div> <div> <div>2</div> </div> <div> <div>3</div> </div> <div> <div>4</div> </div> <div> <div>5</div> </div> <div> <div>6</div> </div> <div> <div>7</div> </div> <div> <div>8</div> </div> <div> <div>9</div> </div> <div> <div>10</div> </div> </div>
Hi aman try this:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.