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
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({});
}
});
How can I prevent sort action in jQuery UI for <h1>Title</h1>?
<div data-user-type="mix" class="col-xs-3">
<h1>Title</h1>
<div data-userId="1" class="user">
<h2>John</h2>
</div>
<div data-userId="2" class="user">
<h2>Bill</h2>
</div>
<div data-userId="3" class="user">
<h2>Max</h2>
</div>
</div>
Here is my try
$(function() {
$('div[data-user-type="mix"]').sortable({
revert: true
});
$('h1').disableSelection();
});
Now I can sort all user and title.
disableSelection() will only disable it from being draggable as other items can change it's position. You need to exclude the items from the selector of sortable.
$('div[data-user-type="mix"]').sortable({
revert: true,
items: ':not(h1)'
});
To connect two lists:
<div id="list1" class="connect">
</div>
<div id="list2" class="connect">
</div>
Connects using the same class name:
$('#list1, #list2').sortable({
connectWith: 'connect'
});
It's all in the docs: Connect Lists
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 am having an issue where my sortable grid is working properly aside from the first element which does not seem to want to work with the rest of the gridded elements. I cannot deduce why this is as I'm very new to JS/JQuery so any help is very much appreciated!
Below is my JS...
$(document).ready(function () {
$(".topic-container").droppable({
accept: ".draggable"
});
$(function () {
$("#draggable").draggable({
snap: ".topic-container",
snapMode: "inner",
snapTolerance: 10,
grid: [100, 50],
revert: "invalid",
opacity: 0.7,
refreshPositions: true,
scroll: true
});
});
$(".topic-container").droppable({
hoverClass: "droppable-highlight"
});
$(".topic-container").droppable({
tolerance: "pointer"
});
$(function () {
$("#droppable, #droppable2").sortable({
connectWith: ".topic-container"
}).disableSelection();
});
});
And my HTML...
<section class="teir-sorter">
<h2>Teir 1 Categories</h2>
<div class="topic-container" id="droppable">
<div class="topic-card draggable" id="draggable"></div>
<div class="topic-card draggable" id="draggable"></div>
<div class="topic-card draggable" id="draggable"></div>
<div class="topic-card draggable" id="draggable"></div>
<div class="topic-card draggable" id="draggable"></div>
<div class="topic-card draggable" id="draggable"></div>
<div class="topic-card draggable" id="draggable"></div>
<div class="topic-card draggable" id="draggable"></div>
<div class="topic-card draggable" id="draggable"></div>
<div class="topic-card draggable" id="draggable"></div>
<div class="topic-card draggable" id="draggable"></div>
</div>
<h2>Teir 2 Categories</h2>
<div class="topic-container" id="droppable2">
</div>
</section>
I cannot see any reason why the first element would behave so strangely when the rest of them work. If I drag them into the second droppable area they continue working fine, it's just the one spot in first droppable area (id = droppable1). Not only does the draggable item not sort or snap correctly, but the space it took up becomes unusable by the rest of the draggable elements. Any suggestions? Thanks!
$("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 :)