I have a jsfiddle here - http://jsfiddle.net/X8z6B/1/ - with three draggable boxes in a container that I've made selectable. I can drag a rectangle around two of the boxes and select them but I can't CTRL-click the third box and select it. It seems to be the drag handler that's getting in the way since it works fine if remove draggable() from the box (comment out line 35 in the jQuery). Does anyone know how I can make the third draggable box selected with Ctrl-click?
Thanks
<div id='container'>
<div id="box1" class="box">1</div>
<div id="box2" class="box">2</div>
<div id="box3" class="box">3</div>
</div>
The modifier Ctrl+ is not necessary:
$(function () {
$('.box').draggable();
$('#container').selectable({});
$('.box').click(function (){
$(this).addClass("ui-selected");
});
});
But if a modifier key is important for your case:
$(function () {
$('.box').draggable();
$('#container').selectable({});
$('.box').click(function (e){
if(e.metaKey){// might be ctrlKey, but metaKey is a Mac compatible
$(this).addClass("ui-selected");
}
});
});
Related
I am working with Select2 library (version 4.0.1), but I have strange position of the dropdown of the select. You can see on the image below.
You can see that select2 dropdown overlaps the select area and I can see in the example in the documentation that it should appear at the bottom of the select. Here is my code
<select class="select2">
<option>--Select--</option>
<option>Sample Page</option>
</select>
<script>
jQuery(document).ready(function() {
jQuery('.select2').select2();
});
</script>
Any ideas why this is happening?
In the select2 initialization, add the parent element.
If you are using a jquery modal, do not use the modal ID alone, go a level deeper and keep it as dropdownParent, else it will take the whole screen as its position relatively.
var dropdownParentEl = $('#addModal > .modal-dialog > .modal-content')
selectBoxElem.select2({
dropdownParent: dropdownParentEl,
})
I want my dropdown to be relative within the modal-content, so i kept it as my parent, you change according to its requirement.
I am having trouble setting the containment value of the jqueryUI draggable function when using the [x1,y1,x2,y2] format. Here is the js:
<script type="text/javascript">
//slideTest.js
$(document).ready(function(){
$('.slideMin').each(function(){
$(this).draggable({
containment: [$(this).parent().offset().left,$(this).parent().offset().top,$(this).next('div').offset().left,$(this).parent().offset().top]
});
});
</script>
And the html which the script is interacting with:
<div class="slideBar">
<div class="slideMin"></div>
<div class="slideMax"></div>
</div>
I am trying to set the drag containment (of the slideMin div) based on the offset().left of the next div, in this case (slideMax).
In other words, I want the draggable behavior to stop (for the slideMin div) when it reaches the left of the next (slideMax) div.
The x1 seems to be working as the drag is stopping at the position defined, however, it is overlapping and extending beyond the next div, which i do not want to happen. There must be something wrong with how I am setting the x2 value but I am not sure what it is.
Any advice?
Figured it out... I had two divs, both draggable. The first div was to stop when it reached the next div. The above code accomplished this until I was to drag either div: once either div was dragged, the draggable range for the other div was not updating, therefore, I received the error where the draggable range was overlapping the other div. To fix it, I had to re-initiate and set the draggable range for the other div within the draggable function for the div that was being moved.
The new code goes something like this:
$(this).draggable({
containment: [$(this).position().left, $(this).position().top, $(this).next().position().left - $(this).width()+4, $(this).position().top],
drag: function(e){
$(this).next().draggable({
containment: [parseFloat($(this).position().left) + parseFloat($(this).width())-4, $(this).next().position().top, parseFloat($(this).parent().position().left) + parseFloat($(this).parent().width())-3, $(this).next().position().top]
});
}
});
$(this).draggable({
containment: [parseFloat($(this).prev().position().left) + parseFloat($(this).prev().width())-4, $(this).position().top, $(this).position().left, $(this).position().top],
drag: function(e){
$(this).prev().draggable({
containment: [$(this).parent().offset().left-$(this).prev().width()+5, $(this).prev().position().top, $(this).position().left - $(this).prev().width()+4, $(this).prev().position().top]
});
}
});
PS, the numbers -3 -4 +5, etc. were to add spacing for the handles on my draggable divs (4px handles), if you don't have handles you don't need the extra -3 -4 +5 portions of the code.
I am using jQuery UI to make selections. I'm having an ul-list that I made selectable. The li-items contains icons and texts. It seems that the selectable comment not only makes the li-items selectable, but also the elements in the li-items. This gives some unexpected results.
I tried to make an example in jsFiddle: http://jsfiddle.net/eJSGU/
If you click several times on the edges of the icon, you will see that there is sometimes something selected that is bigger than the li-block.
<li class="ui-widget-content">
<div class="img"><img src="http://bib.arts.kuleuven.be/bibliotheek/images/icon_facebook.jpg"></div>
<div class="lbl">Item 1<div>
</li>
Anyone an idea how I can avoid this?
I suggest to use the filter option of the selectable. In your case you want only the li elements to be selectable so you set filter: $('selector').children()'.
<script>
$(function() {
$( "#selectable li" ).selectable({
filter: $('#selectable').children('li')
});
});
</script>
Here is an updated fiddle.
I would like to add an animation to collapsible set with jQuery Mobile.
Let me show a simple example of this:
<div id="tiles" data-role="collapsible-set" data-iconpos="right">
<div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
<div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
<div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
</div>
jQuery Mobile handles this perfectly and shows me collapsible set of 3 items. What I want is ANIMATION, however I seem not to find anything in the docs.
I haven't tested yet how simple CSS animation(animating height property) would work, however is there a jQuery Mobile way of doing it like turning some internal flag ?
EDIT
I have tested out a simple jQuery animate method and it actually works. Just in case anyone else needs this. It runs smoothly even on my 528MHz Android phone on a default browser. A snippet I have added is really simple:
$( ".ui-collapsible-heading" ).live( "click", function(event, ui) {
$(this).next().css('height', '0').animate({
height: '100px'
});
});
Here ya go:
$('[data-role="collapsible"]').bind('expand collapse', function (event) {
$(this).find('p').slideToggle(500);
return false;
});
I liked the idea you were going for so I played around with it a bit. This hooks into the way jQuery Mobile controls collapsible widgets so it's a bit less hacky then binding to the heading element.
The return false; stops the default behavior and the other line toggles the content in/out of view using the jQuery slideUp/slideDown animations. You could also use .fadeToggle() or roll your own animations. If you check event.type you can animate based on the event fired.
Here is a demo: http://jsfiddle.net/VtVFB/
Please note that in jQuery Mobile 1.4 and up you need to bind to the collapsibleexpand and collapsiblecollapse events instead of expand and collapse. So the complete code becomes
$('[data-role="collapsible"]').on('collapsibleexpand collapsiblecollapse', function(event) {
$(this).find('p').slideToggle(500);
return false;
});
The code is not entirely right.
It overrides the default jquery mobile implementation of the expand collapse events,
but does not handle the change of the expand collapse icons.
A better code will be:
$('[data-role="collapsible"] h3:first').bind('click', function (event) {
$(this).next('p').slideToggle(500);
return false;
});
The accepted answer doesnt account for that it doesnt change the collapsible cursor because of return false, so this is my answer working:
In my Project it was the contents relative to the [date-role="collapsible"] are $(this).find('>*:not(h3)')
/* animate collapsible-set */
$('[data-role="collapsible"]').on('expand', function (event) {
$(this).find('>*:not(h3)').each(function() {
if (!$(this).is(':visible')) {
$(this).stop().slideToggle();
}
});
}).on('collapse', function (event) {
$(this).find('>*:not(h3)').each(function() {
if ($(this).is(':visible')) {
$(this).stop().slideToggle();
}
});
});
suppose I have a panel with draggable element,
and a droppable container,when I drag the element into container,
<div id="panel">
<div class="square"></div>
</div>
<div id="canvas"></div>
I want clone the draggable element,but the issue is ,the reltive position info could be copy,too
So how can I just let the clone one stay at the mouse stay position?,here is my code
$('.square').draggable({
revert:"valid"
});
$('#canvas').droppable({
drop: function (e, ui) {
$(ui.draggable).clone().appendTo($(this));
}
})
here is example http://jsfiddle.net/AN5gt/
I would suggest to remove the revert to make the animation more realistic.
$('.square').draggable({
helper:"clone"
});
$('#canvas').droppable({
drop: function(e, ui){
$(ui.draggable).clone().appendTo($(this));
}
})
Well, first I would like to thank you for asking this question, and it solved one of my own question.
I want to make link of physical file listed in a folder tree. ie for picture gallery, i am showing complete folder tree list, and want the admin to drag the image and put in the gallery.
Here what I have done.
$('.square').draggable({
revert:"valid",
helper:"clone"
});
$('#canvas').droppable({
drop: function (e, ui) {
$(ui.draggable).clone().appendTo($(this));
}
})