Menu
i have a problem with the revert speed.
Here is a working example http://www.jsfiddle.net/V9Euk/94/ <-- updated
Change something in the sortable list ... the speed is fast (revert 100). But when you drop the "four" into the sortable list, the speed is slow.
But why? oO
kind reagards Peter
911
Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable properties.
jQueryUI sortable() method is used to re-order elements in the list or grid form, by using the mouse. The sorting ability of this method is based on an operation string passed as the first parameter.
Sortable JS is a Javascript library that enables you to sort lists by dragging and dropping list items. It also supports Javascript frameworks such as Meteor, AngularJS, React, Vue and Ember.
There's nothing wrong with the code... except that it was invalid. You had a incorrectly closed tag, and other oddities inside the code that once cleaned up resolved the problem. I think. Unless it isn't what you was asking about.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<ul id="k1" style="width:350px; height:350px; margin:20px;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<hr />
<ul style="width:350px; height:350px;">
<li class="gt">Four</li>
</ul>
</body>
</html>
CSS:
body {
font-size: 12px;
}
li{
border:1px solid #444444;
background-color:#AAAAAA;
padding:10px;
margin:10px;
}
jQuery:
$("#k1").sortable({ revert: '100' });
$('.gt').draggable({ connectToSortable: '#k1', revert: 'invalid', revertDuration: 100 });
Edit: Sorry, I misread the question. The code was slightly confusing, and I missed the problem. The solution is a little bit of a kludge, but I think it will work.
var original = $('#k1');
original.sortable({ revert: 100 });
$('.gt').draggable({
connectToSortable: original,
revert: 'valid',
revertDuration: 100,
stop: function(event, ui) {
original.sortable("option", "revert", 100);
}
});
Basically it re-set the revert option on the k1 div after .gt is dropped.
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
