jQuery sortables - connect problem - javascript

I have two examples on jsFiddle:
http://jsfiddle.net/9uhfX/1/
http://jsfiddle.net/9uhfX/2/
Example 1
In the first one I can move the list elements around, even from a child element to the root element. However, it's not very easy to make it "snap".
Example 2
In the second example I have floated the list elements. This time I can't get them to "snap" to the child elements.
Questions
Is there a good way to make it easier to snap?
How do I solve it with float?

There is a so far undocumented option in jQuery sortable to define the element against which tolerance is checked: toleranceElement. If not set, the whole item is checked for placement (including the nested list), but if it's set, only sub-items matching the selector are taken into account.
This means you have to change your HTML markup a bit to wrap the main content of the list item (the item text in your case) in an element and use that to check for sort positioning. That will leave out the nested <ul>s, effectively stopping jittering which is otherwise quite serious.
HTML:
<div id="example5">
<ul>
<li ><div>Item 1</div>
<ul>
<li ><div>Item 1 1</div><ul></ul></li>
<li ><div>Item 1 2</div><ul></ul></li>
<li ><div>Item 1 3</div><ul></ul></li>
</ul>
</li>
<li ><div>Item 2</div><ul></ul></li>
<li ><div>Item 3</div><ul></ul></li>
<li ><div>Item 4</div><ul></ul></li>
</ul>
</div>
Javascript:
$("#example5 ul").sortable({
connectWith: "#example5 ul",
placeholder: "ui-state-highlight",
toleranceElement: 'div'
});
Try your modified demos here and here.
You might also want to play with opacity, cursorAt and tolerance. Have a look at the documentation.
Note that it's not a perfect solution, in case you're not satisfied with the results, have a look at using a plugin. Manuele J Sarfatti's nestedSortable plugin looks like something that might be of use for you: http://mjsarfatti.com/sandbox/nestedSortable/

I'm looking at both of your examples in Safari and I am able to move any element in/out of the children elements without a huge problem.
Here is why #2 is more difficult to use...
The "drop zone" in example #2 is only as high as your element so with your short elements, there is a much smaller area to get your mouse into.
The "drop zone" in example #1 is very wide so it's very easy to hit it as you move your mouse up/down the list.
The only way I can think of to solve your problem is to simply make your items in example #2 taller, thereby simulating what you have in example #1 except on its side.
http://jsfiddle.net/9uhfX/3/

Related

How to find more than one element in focus

I have a HTML where more that one element is active.
`document.activeElement `
returns the first one, but I need to find the second element which is in focus.
sample code as follows.
`<ul Class="ul1" Active="true">
<!-- some tags-->
<ul class="ul2">
<li Active="true">My Element</li>
</ul>
</ul>`
I need to find My Element in the above code which is dynamic(Some tags part will have different combination of tags), also position of li in UL2 will vary.
Please help to get the second element with javascript.
document.querySelectorAll('[Active="true"] [Active="true"]')
this will select every active child of every active element. Sadly, though it will also select the 3rd, 4th... nth child.
So if you have any other way to differentiate which one is the 2nd one, then the task will be much simpler.
If it makes any difference - the very fist element in the returned array will be what you need. but If you have several "2nd active children" you want to select - then you'll have no luck.
also:
document.querySelector('[Active="true"] [Active="true"]')
will return the first match, which is an active child of an active element.

Vue.js - using v-el inside v-for doesnt work

I want to animate certain divs inside v-for loop on click event. For that i need to have dom/jquery elements to work on. Of course i dont want to animate all elements at once, just these specific ones i click.
I wanted to use v-el to achive this, but it doesnt work, $els object doesnt return anything. This is what i tried:
<li v-for="element in elements" v-el="li">
<span v-el="span">lorem</span>
<span v-el="span2"> ipsium {{element.content}}</span>
</li>
https://jsfiddle.net/w1cd96ux/
v-el doesn't work on or within a v-for. If each <li> is a component you can use v-ref though then you'd have access to each span through v-el (which is deprecated in the next version of Vue).
I'd probably just take this approach, if I'm understanding correctly:
<li v-for="item in items" #click="animate">
<span>...</span>
<span>...</span>
</li>
Then in your methods you can do:
methods: {
animate(event) {
const li = event.currentTarget
const spans = li.querySelectorAll('span')
...
}
}
Two things:
Correct way to define v-el as per latest version is v-el:span. check this link https://vuejs.org/api/#v-el
your this inside ready method points to top level div so if you put the v-el at top level and try to print in ready function, it will print.
check this jsfiddle
https://jsfiddle.net/oyomyosw/

jQuery: Is using children() more efficient than using child selector

I often need to setup jQuery events on li tags that don't have a class or ID associated with them like in this example:
<div id="menu">
<ul id="nav">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
<li>Nav Item 4</li>
<li>Nav Item 5</li>
</ul>
</div>
My understanding is that jQuery selecting reads from right to left so if I were to use a $('#nav > li) jquery selector it would have to search through all of the li tags and then evaluate whether the li tag had a parent with the id of nav.
Assuming this page has 30 li tags but I only want to select the 5 in the example, would it be more efficient to use $('#nav').children('li') ? My logic is that it will quickly find the #nav ID and then will only have 5 elements inside of it to search through.
An additional question I have is If there were more than 30 child elements to #nav would it then be more efficient to use the child selector $('#nav > li')?
Thanks in advance
After having to try and create a custom selector, I was surprised to find that selectors are indeed evaluated right to left.
That means $('#nav > li') will first find all LIs in the page, then filter those to retain any having id="nav" in their immediate parent.
$('#nav').children('li') will be faster for the reasons above and what you assumed (which was correct).
The other side of the coin is "do you care?". If, for instance, you are only interested in mouse events, then the speed is driven by human interaction (at most a few times per second), whereas the speed difference in your selector methods would only be noticeable if you could do it 50,000 times per second. basically you will not normally care, but you should err on the side of efficiency when you can :)
if you were just after this to add mouse events, say click, using a single delegated event handler, attached to an ancestor element, will be very efficient:
e.g.
$("#nav").on('click', 'li', function() {
// DO SOMETHING HERE - "this" IS THE LI CLICKED
});
This is efficient because it works as follows:
Listen for click events bubbling up the DOM to the single id="nav" element we listen to.
Then apply the jQuery selector against the elements in the bubble chain.
Then apply the function to the matching element that caused the event.
This technique also means it will work for dynamically added objects as they only need to match the selector at event time (not event-registration time).
Notes:
If no convenient ancestor is available to target, use document as the default for bubbled events.
Do not use 'body' for delegated event handlers as styling can stop body receiving bubbled mouse events (if it has a calculated height of zero). Use document as your fallback.

Toggle multi-level ul with mootools

Greetings,
I would like to toggle a huge multi-level ul with mootools 1.1 or plain javascript.
The list looks like:
HTML:
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>
<ul>
<li>ddd
<ul>
<li>fff</li>
<li>ggg</li>
</ul>
</li>
<li>eee</li>
</ul>
</li>
</ul>
What I would like to do initially is to show the first level expanded, and the other levels collapsed and when each of the list items is clicked, to expand the ul below it.
Is it possible to do it without (greatly) modifying the html above?
From the documentation, I see that Fx.Slide is the most appropriate, however it accepts the id of the element as a parameter, which means I have to assign id's to each list item.
Is there a way by using selectors of collections of elements starting from the top?
I'm not sure whay I'll say apply with the very old 1.1 version. However, at least since 1.2, the element you need to pass is either the ID (like you said), either the actual element.
If you can use another version than 1.1, try the 1.3 which makes it easier to select the elements you want.
Here, I believe you need every <ul> element which has a direct <li> as parent. MooTools 1.3 features this new selector engine Slick, which would accomplish it fairly easilly: ul !> li.
However, I'm not sure (I didn't success) that the direct child selectors works properly with 1.1.
Here is what I came up with: http://jsfiddle.net/rCfwq/

selecting hidden span

Trying to select span within the first item in a usorted list but I can't quite seem to get the DOM right
<li class="chapterItem"> <a
href="http://www.neuromanga.com/mangaReader.php?chapterNo=12&#pageNo=1"
title="http://www.neuromanga.com/mangaReader.php?chapterNo=12&#pageNo=1
">Naruto 522 world</a> <span
id="date">Nov 21st 2010</span> <br>
<span style="display:none"
class="hiddenChapNo">12</span> </li>
Here is the jQuery code I been trying to use to select it
alert($('li').first().$('.hiddenChapNo').text());
You need to use .find() to get a descendant here, like this:
alert($('li').first().find('.hiddenChapNo').text());
Or a bit more compact with :first and a descendant selector (space):
alert($('li:first .hiddenChapNo').text());
Your code certainly looks like it should work, I assume that there's another <li> before this one that trips it up.
Also, ids are (should be) unique in a web page, so $('#hiddenChapNo') should be sufficient.
Assuming you need multiple hidden spans, the proper way to mark them would be <span class="hiddenChapNo"> (you can then also hide them with CSS instead of inline styles).
Try just using alert($('#hiddenChapNo').text());. An id should be unique on a page, use classes if you need otherwise.
Found a solution
alert($('.hiddenChapNo').first().text());

Categories

Resources