$("div.con_user").draggable({
delay: 100,
revert: true,
containment: $(this).closest(".roomblock_content"),
start: function( event, ui) {
$(this).css("z-index", "200");
},
stop: function( event, ui) {
$(this).css("z-index","50");
}
});
The containment option for JQuery UI just seems to be broken. Unless I clone div.con_user and reapply the draggable, it doesn't seem to respect the containment option at all.
Could it be due to the fact that I have many .roomblock_content elements in my page, or because my draggable is contained inside a droppable?
EDIT: Sorry, I forgot the HTML markup. Here it is:
<div class="roomblock_content">
<div class="roomblock_col1">
<div class="roomblock_pool_box">
<span class="roomblock_pool_title"> Pool </span>
<ul class="roomblock_slots">
<li>
<div class="con_user prepaid_con"> </div>
</li>
<li>
<div class="con_user prepaid_con"> </div>
</li>
</ul>
</div>
</div>
</div>
I think you are wrongly setting the containment option of draggable. It should be like below:
containment: ".roomblock_content",
DEMO
Hope this works for you :)
Related
When dragging an element and dropping the droppable div.
This drag element is also cloned and resizable into droppable div.
But each element dragged into a droppable div position overlapping on the top of the box, not set a current position when the element clone and dragged to drop into the droppable div.
Is any way to solve the dragging item drop to a fixed position?
HTML
<div class="fields mb-md-1 pb-1" id="item1">
//drag item
<div class="item-info">
<input type="text" class="w-100 h-100 form-control"
placeholder="Name">
</div>
//droppable div
<div class="file-viewer
position-relative" style="order: 2"></div>
jQuery
$(".item-info").draggable({
helper: 'clone',
cursor: "move",
});
$(".file-viewer").droppable({
accept: ".item-info",
drop: function(e, ui) {
$(this).append($(ui.draggable).clone());
$("#myList1 .item-info").addClass("new_item");
$(".new_item").removeClass("ui-draggable item-info");
$(".new_item").resizable({
handles: "all",
autoHide: true
});
$(".new_item").draggable({});
}
});
I am trying to achieve flexslider on in riotjs app. The slider is working fine but when I set custom item width for the slider, it doesn't. According to docs, it is supposed to work.
self.on('updated', function(){
$('.flexslider').flexslider({
animation: "slide",
// itemWidth: 210,
// itemMargin: 5,
controlsContainer: ".flex-container",
start: function (slider) {
$('.total-slides').text(slider.count);
},
after: function (slider) {
$('.current-slide').text(slider.currentSlide);
}
});
});
riot component:
<rsc-component id="dropBox" class="mybox col-lg-12">
<div class="flexslider">
<ul class="slides">
<li>
<img src="../images/slide1.jpg" alt=""/>
</li>
<li>
<img src="../images/slide2.png" alt=""/>
</li>
</ul>
</div>
</rsc-component>
Give you flexslider a name, and refer to it internally, rather than hunting for it using jquery.
<rsc-component id="dropBox" class="mybox col-lg-12">
<div class="flexslider" name="flexslider">
<ul class="slides">...</ul>
</div>
<script>
...
//store reference to flexslider
this.on('mount',function(){
this.$flexslider = $(this.flexslider); // from the name property in template
});
this.on('updated',function(){
// I would have at a guess that the flexslider needs to recalc itself, so
// destroy it and regenerate.
this.$flexslider.detach().flexslider({...})
});
</script>
</rsc-component>
I'm creating a drag and drop system with jQuery, it's working perfectly, but i need to make just a specific region of the element a "trigger" for the drag...
This is my draggable element, I need to make the red area the trigger, any idea of how to do this?
Here is a pen: http://codepen.io/caiokawasaki/pen/qdqJKx
HTML
<div id="groupItems1" class="list-item">
<div class="single-list-item">
<div class="trigger"></div>
<div class="title">Header</div>
</div>
<div class="single-list-item">
<div class="trigger"></div>
<div class="title">Formulário de contato</div>
</div>
<div class="single-list-item">
<div class="trigger"></div>
<div class="title">Fotter</div>
</div>
</div>
<ul id="groupItems2" class="itemsList">
<li>fdsfdsfds</li>
<li>fdsfdsfds</li>
<li>fdsfdsfds</li>
<li>fdsfdsfds</li>
<li>fdsfdsfds</li>
</ul>
jQuery
$("#groupItems2").sortable({
revert: true,
stop: function(event, ui) {
if(!ui.item.data('tag') && !ui.item.data('handle')) {
ui.item.data('tag', true);
ui.item.fadeTo(400, 0.1);
}
}
});
$("#groupItems1").find(".single-list-item").draggable({
connectToSortable: '#groupItems2',
helper: 'clone',
revert: 'invalid'
});
$("ul, li").disableSelection();
You can use the handle property of draggable to achieve this:
$("#groupItems1").find(".single-list-item").draggable({
connectToSortable: '#groupItems2',
helper: 'clone',
revert: 'invalid',
handle: '.trigger'
});
Updated codepen
I have a bit of a problem with jQuery UI Sortable and would need some help: I have the following html code:
<div class="sortable">
<div class="item">
<p>title1</p>
<div class="sort">sort 1</div>
</div>
<div class="item">
<p>title2</p>
<div class="sort">sort 2</div>
</div>
<div class="item">
<p>title3</p>
<div class="sort">sort 3</div>
</div>
</div>
There's a container with 3 divs. Each has a title and a defintion - the 3 definitions should be sortable, but the title above should always remain unchanged.
Here's the js:
$(".sortable").sortable({
items: ".sort"
});
If I specify in the sortable options to sort only the specified items, they are sorted, but taken out of the div structure I want - each inside one of the parent ".item" elements.
Here's a fiddle with the behaviour: http://jsfiddle.net/wPtjM/
Is there a way to achieve what I need with jQuery Sortable? All the examples I saw & tried lack such an outcome. Many thanks in advance!
Looking for something like this?
var dropped;
var titleDrop;
var titleChange;
$(function() {
$(".sortable").sortable({
items: ".sort",
stop: function( event, ui ) {
if(titleDrop != titleChange)
dropped.append(ui.item);
},
change: function(event, ui){
titleChange = ui.placeholder.parent().find('p').text();
}
});
$( ".item" ).droppable({
accept: ".sort",
drop: function( event, ui ) {
dropped = $(this);
titleDrop = $(this).find('p').text();
}
});
});
FIDDLE
Update
Incorporates switching places:
FIDDLE2
I found the (modified) code below but the alert does not happen. Please help.
I also do not understand why the onclick is on "a[name=tab]", why not on "tab1" or a[tab1]?
<script>
jQuery(document).ready(function($){
$("a[name=tab]").click(function(e){
if($(this).attr('id')=="tab1")
{
alert("1");
}
if($(this).attr('id')=="tab2")
{
alert("2");
}
});
<div id="tabs">
<ul>
<li><a name="tab" id="tab1" href="#tabs-1">One</a></li>
<li><a name="tab" id="tab2" href="#tabs-2">Two</a></li>
</ul>
<div id="tabs-1">
<p>First tab.</p>
</div>
<div id="tabs-2">
<p>Second tab.</p>
</div>
</div>
I found there is a function that is run on tab change but I do not know how to use it and cannot find where to put it in my code. I would like help on this too. Thank you.
$("#tabs").tabs({
alert(ui.index);
select: function(event, ui) {
alert(ui.index);
return true;
}
});
Use the activate event or beforeActivate event.
$(document).ready(function () {
$("#tabs").tabs({
activate: function (event, ui) {
alert(ui.index);
}
});
});
First, Why use a[name=tab] and not [tab1]?
a[name=tab] means an a tag with a name attribute equal to tab.
If you use a[tab1] it means an a tag that has a tab1 attribute.
You should check the jquery docs about it.
http://api.jquery.com/category/selectors/attribute-selectors/
Second, your code isn't working because it has an error, but you can fix it like this:
$("#tabs").tabs({
select: function(event, ui) {
alert(ui.index);
return true;
}
});
By the way, you should check about jQuery UI tabs
http://api.jqueryui.com/tabs/