I'm using jQuery sortable + jQuery draggable to put together a page that adds and removes images to a slideshow. I have it set up now such that I can drag in new screens and drop them into the named sequences I want, and it'll create the DOM elements I need.
I am successfully scanning the page for the necessary elements and committing them to an array, but it never picks up the newly added items. So for example, I have the following elements to begin with:
<h3 data-sequence-title="sequence1">Sequence 1</h3>
<ul class="sortable connectedSortable ui-sortable">
<li data-screen="screen1">Screen 1</li>
<li data-screen="screen2">Screen 2</li>
<li data-screen="screen3">Screen 3</li>
</ul>
...and I then add a row:
<h3 data-sequence-title="sequence1">Sequence 1</h3>
<ul class="sortable connectedSortable ui-sortable">
<li data-screen="screen1">Screen 1</li>
<li data-screen="screen2">Screen 2</li>
<li data-screen="screen3">Screen 3</li>
<li data-screen="screen4">Screen 4</li>
</ul>
jQuery will only ever return the first elements, not the updated ones. Here's the js I'm using:
$( document.body ).on('click', '.submit', function(){
// Build nested array from DOM elements
var jsonObj = [];
$('.sortable').prev('h3').each(function(){
var obj = {
title: $(this).data("sequence-title"),
Screens: []
};
$(this).next("ul").children('li').each(function() {
obj.Screens.push({
image: $(this).data("screen")
});
});
jsonObj.push(obj);
});
});
Code that adds new LIs:
// Initialize draggable / droppable functionality
$('.sortable').sortable({
placeholder: 'ui-state-highlight',
revert: true
});
$('.draggable li').draggable({
connectToSortable: '.sortable',
helper: 'clone',
revert: 'invalid'
});
$('.sortable').disableSelection();
I need to return the modified DOM, not the elements that were there when I loaded the page.
After you add an element to your sortable you have to update the component:
$(".sortable").sortable("refresh");
I did a quick experiment based on your code. I am able to drag elements from below and add them to the first sequence. Then they are accessible when the clicky button is clicked.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
</head>
<body>
<div id="moo">clicky</div>
<ul class="sortable connectedSortable ui-sortable">
<h3 data-sequence-title="sequence1">Sequence 1</h3>
<li data-screen="s1screen1">Seq 1 Screen 1</li>
<li data-screen="s1screen2">Seq 1 Screen 2</li>
<li data-screen="s1screen3">Seq 1 Screen 3</li>
</ul>
<ul class="draggable">
<h3 data-sequence-title="sequence2">Dragable Sequence (Drag these elements up and assign to sequence 1)</h3>
<li data-screen="s2screen1">Seq 2 Screen 1</li>
<li data-screen="s2screen2">Seq 2 Screen 2</li>
<li data-screen="s2screen3">Seq 2 Screen 3</li>
</ul>
<script>
$(document.getElementById('moo')).on('click', function(){
// Build nested array from DOM elements
var jsonObj = [];
$('.sortable h3').each(function(){
var obj = {
title: $(this).data("sequence-title"),
Screens: []
};
$(this).siblings("li").each(function() {
obj.Screens.push({
image: $(this).data("screen")
});
});
jsonObj.push(obj);
});
alert(JSON.stringify(jsonObj));
});
// Initialize draggable / droppable functionality
$('.sortable').sortable({
placeholder: 'ui-state-highlight',
revert: true
});
$('.draggable li').draggable({
connectToSortable: '.sortable',
helper: 'clone',
revert: 'invalid'
});
$('.sortable').disableSelection();
</script>
</body>
</html>
Related
I'm using this plugin, Acmeticker.
It's working good. Now I tried to add more list using button .add to add Breaking News 9 at the last of ul. But it's not working as expected. It show together with another li if I click button add, and if I click button more than one it show me duplicate Breaking News 9.
$('.my-news-ticker-3').AcmeTicker({ type:'typewriter',/*horizontal/horizontal/Marquee/type*/
direction: 'right',/*up/down/left/right*/
speed:50,/*true/false/number*/ /*For vertical/horizontal 600*//*For marquee 0.05*//*For typewriter 50*/
controls: {
prev: $('.acme-news-ticker-prev'),/*Can be used for horizontal/horizontal/typewriter*//*not work for marquee*/
toggle: $('.acme-news-ticker-pause'),/*Can be used for horizontal/horizontal/typewriter*//*not work for marquee*/
next: $('.acme-news-ticker-next')/*Can be used for horizontal/horizontal/marquee/typewriter*/
}
});
$('.add').on('click', function()
{
$(".my-news-ticker-3").append('<li>Breaking News 9</li>');
});
<link href="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/css/style.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/js/acmeticker.js"></script>
<h2>Typewriter</h2><div class="acme-news-ticker">
<div class="acme-news-ticker-label">Horizontal News</div>
<div class="acme-news-ticker-box">
<ul class="my-news-ticker-3">
<li>Breaking News 1</li>
<li>Breaking News 2</li>
<li>Breaking News 3</li>
<li>Breaking News 4</li>
<li>Breaking News 5</li>
<li>Breaking News 6</li>
<li>Breaking News 7</li>
<li>Breaking News 8</li>
</ul>
</div>
<div class="acme-news-ticker-controls acme-news-ticker-horizontal-controls">
<span class="acme-news-ticker-arrow acme-news-ticker-prev"></span>
<span class="acme-news-ticker-pause"></span>
<span class="acme-news-ticker-arrow acme-news-ticker-next"></span>
</div>
<button class="add">Add</button>
This plugin adds style i.e :display: none; opacity: 0; to each lis dynamically so when you append new lis you can add this to your li.Also , when you use .append() this will not append lis after Breaking news 8 because position of lis are getting change so to append new lis only after last li you can use data-attr which will helps us to find last li and append new li after that .
Demo Code :
$('.my-news-ticker-3').AcmeTicker({
type: 'typewriter',
direction: 'right',
speed: 50,
controls: {
prev: $('.acme-news-ticker-prev'),
toggle: $('.acme-news-ticker-pause'),
next: $('.acme-news-ticker-next')
}
});
$('.add').on('click', function() {
var lengths = $(".my-news-ticker-3 li").length + 1 //get length of lis
//get refrence of last lis
var get_reference = $(".my-news-ticker-3 li[data-ids=" + $(".my-news-ticker-3 li").length + "]")
//insert new lis
$(`<li style="display: none; opacity: 0;" data-text="Breaking News ${lengths}" data-ids='${lengths}'>Breaking News ${lengths}</li>`).insertAfter($(get_reference))
});
<link href="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/css/style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/js/acmeticker.js"></script>
<h2>Typewriter</h2>
<div class="acme-news-ticker">
<div class="acme-news-ticker-label">Horizontal News</div>
<div class="acme-news-ticker-box">
<ul class="my-news-ticker-3">
<!--added ids to keep track-->
<li data-ids='1'>Breaking News 1</li>
<li data-ids='2'>Breaking News 2</li>
<li data-ids='3'>Breaking News 3</li>
<li data-ids='4'>Breaking News 4</li>
<li data-ids='5'>Breaking News 5</li>
<li data-ids='6'>Breaking News 6</li>
<li data-ids='7'>Breaking News 7</li>
<li data-ids='8'>Breaking News 8</li>
</ul>
</div>
<div class="acme-news-ticker-controls acme-news-ticker-horizontal-controls">
<span class="acme-news-ticker-arrow acme-news-ticker-prev"></span>
<span class="acme-news-ticker-pause"></span>
<span class="acme-news-ticker-arrow acme-news-ticker-next"></span>
</div>
<button class="add">Add</button>
I'm trying to use JQuery UI's drag/drop with sortable. When you sort the elements in a "drop zone", it appears to add another (null) element.
HTML
<ul id="sortable" class="drop">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
JS
$("#sortable").sortable();
$( '.drop' ).droppable({
drop: function (event, ui) {
document.getElementById('length').innerHTML = document.querySelectorAll('#sortable li').length;
}
});
You can try it out here: https://jsfiddle.net/udj6p93f/2/
Go ahead and sort the elements and you'll that length becomes 6, even though there are only 5 elements. What's going on here?
I have copied this line
document.getElementById('length').innerHTML = document.querySelectorAll('#sortable li').length;
just after
$("#sortable").sortable();
It's 5. And inspected element, drag and drop 1 element. It adds one more list item.
<li class="ui-sortable-placeholder ui-sortable-handle" style="visibility: hidden;"></li>
I think that happens because of this.
Fix suggestion:
$("#sortable").sortable();
$( '.drop' ).droppable({
drop: function (event, ui) {
document.getElementById('length').innerHTML = document.querySelectorAll('#sortable li').length - document.querySelectorAll('#sortable li.ui-sortable-placeholder').length;
}
});
I'm trying to create a simple filtering systemt that would hide posts that do not have the same id as the li's under the navig class. To achieve this I am looping through all .article li's and checking what's their id.
Example:
click on li with id="health"
Article 2 disappears
Thank you!
HTML:
<ul class="navig">
<li id="health">Health</li>
<li id="ASD">ASD</li>
</ul>
<br>
<ul class="article">
<li id="health">Article 1</li> <br>
<li id="ASD">Article 2</li> <br>
<li id="health">Article 3</li>
</ul>
Javascript:
$('.navig li').onclick(function () {
$id = this.id;
$('.article li').each(function() {
if ($id != this.id) {
$('.article li').hide();
}
});
});
The fundamental problem is your HTML is invalid. You can't use the same id value on more than one element. Separately, you've used onclick where you would want to use click.
I'd probably use a data-article-id attribute on the navigation li instead, like this:
For example: Live copy (source)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset="utf-8">
<title>Testing</title>
</head>
<body>
<ul class="navig">
<li data-article-id="health">Health</li>
<li data-article-id="ASD">ASD</li>
</ul>
<br>
<ul class="article">
<li id="health">Health Article</li>
<li id="ASD">ASD Article</li>
</ul>
<script>
$('.navig li').click(function () {
var articleId = $(this).attr("data-article-id");
alert(articleId);
var articles = $(".article li");
articles.not("#" + articleId).hide();
$("#" + articleId).show();
});
</script>
</body>
</html>
You'll want to do something to hide the articles (or show a default one) when the page loads, etc.; I'll leave that as an exercise for you. :-)
Side note: br elements cannot be children of ul elements, I've removed the ones from the articles list.
$('.navig li').onclick(function () { <-- not valid jquery
There is no onclick method in jQuery...there is .click(function(){}) or on("click", function(){})
second porblem, ids need to be singular. They can not be repeated. Use a data attribute [and br's can not be children of ul]
<ul class="navig">
<li id="health">Health</li>
<li id="ASD">ASD</li>
</ul>
<br>
<ul class="article">
<li data-id="health">Article 1</li>
<li data-id="ASD">Article 2</li>
<li data-id="health">Article 3</li>
</ul>
and script
$('.navig li').on("click", function() {
var id = this.id;
$(".article li").hide().filter('[data-id="' + id + '"]').show();
});
JSFiddle: http://jsfiddle.net/q8SCF/
I have a problem, i try to do complex sorting: example
without group
-child0
-- GROUP1
-child1
-child2
-- GROUP2
-child3
-child4
I need groups to be sorted (move all group down), with all childs, and childs of a group (make child4 upper then child3), and childs between groups (move child4 to group2 ), or make child out of group, can i make this with jquery ui sortable, or any ready solution?
Try this code: http://jsfiddle.net/lotusgodkk/28nMJ/201/
$(function () {
$('ul.mainlist').sortable({
connectWith: 'ul',
});
$('ul.sublist').sortable({
connectWith: 'ul'
});
});
HTML:
<ul class='mainlist'>
<li>One (a)</li>
<li>Two (a)</li>
<li class="hasItems">Three (a)
<ul class="sublist">
<li>subitem1-1</li>
<li>subitem1-2</li>
<li>subitem1-3</li>
<li>subitem1-4</li>
</ul>
</li>
<li>Four (a)</li>
<li class="hasItems">Five (a)
<ul class="sublist">
<li>subitem2-1</li>
<li>subitem2-2</li>
<li>subitem2-3</li>
<li>subitem2-4</li>
</ul>
</li>
</ul>
<ul class='mainlist'>
<li>1</li>
<li>Two (b)</li>
<li>Three (b)</li>
</ul>
I have an unordered list and have added draggable functionality to each of the list item using jquery ui draggable. the list is inside a div with id="content". Here is the snapshot of my UL list
Here is the code i have written:
<script src="../../jquery-1.8.0.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script type="text/javascript">
$(function() {
$( ".draggable" ).draggable({
scroll: true,
scrollSensitivity: 100,
revert: true,
containment: '#content',
zIndex: 999990,
revertDuration: 100,
delay: 100
});
});
</script>
<div style="width:200px;height:300px;overflow:auto;" id="content">
<ul>
<li class="draggable">One</li>
<li class="draggable">Two</li>
<li class="draggable">Three</li>
<li class="draggable">Four</li>
<li class="draggable">five</li>
<li class="draggable">six</li>
<li class="draggable">Seven</li>
<li class="draggable">Eight</li>
<li class="draggable">Nine</li>
<li class="draggable">Ten</li>
<li class="draggable">Eleven</li>
<li class="draggable">Twelve</li>
<li class="draggable">Thirteen</li>
<li class="draggable">Fourteen</li>
<li class="draggable">Fifteen</li>
<li class="draggable">Sixteen</li>
<li class="draggable">Seventeen</li>
<li class="draggable">Eighteen</li>
<li class="draggable">Nineteen</li>
<li class="draggable">Twenty</li>
</ul>
</div>
What I would like to do is when I am dragging any list item within the container (i.e div with id="content") and when the mouse is at the edge of the div border or size, the container should also scroll so that i could move upward and downward within the container.
For example if i wanted drag the last list item in the list to the first in the list, so when the mouse is at the top end of the div edge, the container (in our case div) should also scroll automatically. Is this a bug in jquery ui draggable?
Please help
Try downgrading to jQuery 1.7.2
(Its not supposed to work with 1.8 yet I think. You can find the latest compatible version within the rar when you download jQuery UI)