using Jquery UI, I'm trying to drag elements and drop them inside bootstrap columns. A simple idea but doesn't work, as you may try yourself:
http://jsfiddle.net/r4rp93ac/1/
It only drops inside the first bootstrap column
I found related questions:
Bootstrap 3 column class interfering with jquery-ui droppable div
jQuery UI Draggable with Bootstrap layout
and tried to add
.ui-draggable-handle {
z-index: 1;
}
.ui-draggable-dragging {
z-index: 10000!important
}
to css, but doesn't help.
Id should be unique, so if you wan two droppable zones, use class instead:
<div id="droppable2" class="droppable col-xs-3">
<p>Drop
<br>here</p>
</div>
<div id="droppable2" class="droppable col-xs-3">
<p>Drop
<br>here</p>
</div>
And
$(".droppable").droppable({
drop: function (event, ui) {
$(this).find("p").html("Dropped!");
}
});
Working demo
Related
I have a slider created using JQuery-UI which has 4 slider segments. The structure is something like this:
<div id="mySlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all disabled">
<div class="ui-slider-segment" title="1">
<div class="ui-slider-segment" title="2">
<div class="ui-slider-segment" title="3">
<div class="ui-slider-segment" title="4">
</div>
Initially the slider has the 'disabled' class. When I click on any segment of the slider, it triggers the slideChange event and the event handler which I wrote for that event removes the class 'disabled'. This works as expected in Chrome and Firefox browsers.
My problem occurs when I test this in casper.js. I've tried the following one after the other without success.
I followed the solution posted here: How to move jquery-ui slider with CasperJS
//left and top co-ordinates of the segments fetched using element.getBoundingClientRect()
this.mouse.down(242.890625,488.75);
this.mouse.move(214.46875,403.9375);
this.mouse.up(214.46875,403.9375);
I can't use CSS3 selectors for the triggering mousedown in casper.js, as there are no IDs for the segments, and every segment has the same classes (dynamically generated by JQuery-UI).
var slide = casper.evaluate(function(){
var sliderId = $('#mySlider');
sliderId.slider('value',2);
});
casper.then(function(){
var sliderClass = casper.evaluate(function(){
return document.getElementById('mySlider').className;
});
console.log(sliderClass); //still contains the class 'disabled'
});
Where am I going wrong? I've included both jquery and jquery-ui libraries. Is there any other way?
i'm applying jquery sortable on list of divs below is my code
<div class="area_options">
<div class="area_top"><p>At the bar</p></div>
<div class="area_list"><p>Appetizers</p></div>
<div class="area_list"><p>Beverages</p></div>
<div class="area_list"><p>Cocktail</p></div>
</div>
I want to make area_top div fixed which is heading of container.And apply sortable on the base of are_list div only.
Now sortable working fine and are apply also on area_top div.
How i can make area_top div fixed?
Thanks
You need to set the option items of the sortable() to .area_list
The documentation of the property here says:
Specifies which items inside the element should be sortable.
EDIT: With your current html, the javascript would be like this :
$(".area_options").sortable({ items: ".area_list" });
I thought the basic syntax for a slider was:
<div id="slider"></div>
$("#slider").slider()
But that doesn't make a visible slider. Inspecting the div element, I see that some stylings were applied, but the slider isn't visible.
Here's a fiddle: http://jsfiddle.net/yqNcn/
You have not included the CSS for jQuery UI so classes are applied but styles are not (there are actually none to apply). Here's an edited fiddle that includes the styles (look at the Resources panel); the slider is visible as it should be.
First Import your javascript Files* jquery.s and import Jquery UI widget Jquery-ui.js
Then
Put Your Css Div Tag with id <div id="slider"></div> this Example
<div id="slider"></div>
then Call Jquery slider function....
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
I have one sortable which contains tiles. In addition, I have a bunch of droppables. I want the following interaction:
The user can drag tiles out of the sortable onto some droppable. Ideally, this would move the tile out of the sortable and append it to the droppable. In addition, the droppable should not accept anything anymore, i.e. there may be at most one tile on one droppable. I tried it in this fiddle http://jsfiddle.net/yXeMw/2/ but can't get the "move" to work.
Once that works, the user should also be able to move the tile out of the droppable back to the sortable, which I tried out here: (removed link due to 2 links limit, was version 3 of that same fiddle.) but fails too. (I only tried with an alert as I think the "move from .. to .." part should be the same.) See update 1.
I've been trying this for a few days and just can't figure it out.
PS: I've read tons of similar questions here on SO, but none is really the same as my issue, i.e. moving the element from the sortable to the droppable.
Edit: I would welcome an alternative solution using Mootools aswell.
Update 1: The droppable -> sortable direction only didn't work because my tiles inside the sortable had the float: left attribute which effectively made the sortable itself be of size 0px thus impossible to hover. Fixed fiddle: http://jsfiddle.net/yXeMw/5/
Update 2: Although I found a workaround (see my answer), I would still like to have a solution which moves the element. I couldn't get any of appendTo or append to work.
So, I found out how to emulate it. I am not 100% satisfied with this solution because it doesn't really move the element, so I will accept any better solution.
Rather, I create a new element, remove the old one and hide the helper. Both clone and appendTo don't seem to work.
Here is the fiddle: http://jsfiddle.net/VyfkE/1/
Aswell as the code in case the fiddle will get lost.
html:
<div class="slot">Drop one here</div>
<div class="slot">Or one here</div>
<div class="sortable">
<div class="tile">item 1</div>
<div class="tile">item 2</div>
<div class="tile">item 3</div>
</div>
css:
.slot {
background-color: forestgreen;
width:100px;
height:100px;
border: 1px solid black;
}
.sortable {
display:table-row;
background: #44F;
}
.tile {
display:table-cell;
background: firebrick;
border: 1px solid black;
width: 50px;
height: 25px;
}
and finally the javascript:
$(".slot").droppable({
drop: function(ev, ui) {
// Only want one tile per droppable!
if ($(this).children().length === 0) {
// Create the new element which will be inside the droppable.
cl = $('<div>').addClass('tile').text(ui.draggable.text()).css({
background: 'cornflowerblue'
});
// Make it draggable back into the sortable.
cl.draggable({
connectToSortable: '.sortable',
helper: 'clone' // <-- This is important!
});
$(this).append(cl);
// And remove the element from the sortable.
ui.helper.hide();
ui.draggable.remove();
}
}
});
$(".sortable").sortable({
connectWith: '.slot',
revert: true,
helper: 'clone', // <-- This is important, again!
receive: function(ev, ui) {
// If we get some item from a droppable, remove it from there.
ui.item.remove();
}
});
I have a page with several sections of significantly varying length within a jQuery UI Accordion. If I open a new section (which collapses one of the longer sections above), I'm left at the bottom of the page. Because the sections are of significantly different heights, I can't use the autoheight feature without it looking very strange. Is there any way to use something like scrollto to automatically go to the top of the section I've just expanded?
You can bind a function to the accordionchange event and use jQuery scrollTop():
JavaScript
$(function () {
$("#accordion").accordion({
autoHeight: false,
header: "h3"
});
$('#accordion').bind('accordionchange', function (event, ui) {
$(window).scrollTop(ui.newHeader.offset().top);
});
});
HTML
<div id="accordion">
<div id="accordion-one">
<h3>First</h3>
<div>Some lengthy text</div>
</div>
<div id="accordion-two">
<h3>Second</h3>
<div>Less lengthy text</div>
</div>
<div id="accordion-three">
<h3>Third</h3>
<div>Other text</div>
</div>
</div>
I tested this in FF8.
Links
Accordion change event
jQuery scrollTop()