I made simple script for adding elements in <ul>
, those elements are sortable. When I add new element, <li>
, the element is sortable, I can drag and drop it on other location, but I can't drop other elements on position of newly created element. I hope you understand me. I tried to apply same settings as on manually added elements but it doesn't work:
$(document).ready(function(){
$("ul").sortable({
containment : 'document',
tolerance: 'pointer',
cursor: 'pointer',
revert: 'true',
opacity : 0.6,
connectWith : "ul",
placeholder: 'border',
items : 'li:not(.naslov)'
}).disableSelection();
$("li").ellipsis();
$("#addGroup").click(function(){
$(".kolone").append(
'<ul class="prvi"><li class="naslov">Naslov1</li><li></li></ul>'
).sortable({
containment : 'document',
tolerance: 'pointer',
cursor: 'pointer',
revert: 'true',
opacity : 0.6,
connectWith : "ul",
placeholder: 'border',
items : 'li:not(.naslov)'
}).disableSelection();
});
});
I fixed it with changing selector in first line from 'ul' to 'kolone'
$(".kolone").sortable({
containment: 'document',
tolerance: 'pointer',
cursor: 'pointer',
revert: 'true',
opacity: 0.6,
connectWith: "ul",
placeholder: 'border',
items: 'li:not(.naslov)'
}).disableSelection();
$("li").ellipsis();
$("#addGroup").click(function () {
$(".kolone").append('<ul class="prvi"><li class="naslov">Naslov1</li><li></li></ul>').sortable({
containment: 'document',
tolerance: 'pointer',
cursor: 'pointer',
revert: 'true',
opacity: 0.6,
connectWith: "ul",
placeholder: 'border',
items: 'li:not(.naslov)'
}).disableSelection();
});
And kolone stands for columns.
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.