I want to implement the functionality something like Example 1.3 given on this website. Please help with that.
4
-
Have you worked on it?Steevan– Steevan2015-07-24 06:02:06 +00:00Commented Jul 24, 2015 at 6:02
-
downlaod example code from that website devheart.org/articles/…Umesh Sehta– Umesh Sehta2015-07-24 06:02:13 +00:00Commented Jul 24, 2015 at 6:02
-
tutorial devheart.org/articles/…sadegh– sadegh2015-07-24 06:04:57 +00:00Commented Jul 24, 2015 at 6:04
-
Yes..You need to try implementing first!Jenson M John– Jenson M John2015-07-24 06:05:06 +00:00Commented Jul 24, 2015 at 6:05
Add a comment
|
4 Answers
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',
});
});
Comments
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>
Comments
$(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:
Comments
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());
}
});
