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({});
}
});
Related
I have a basic function that is used to remove items from one div and place them in another (drag and drop widget). When moving multiple items, the appendchild function seems to be altering the list in place and losing elements.
function resetm2mAlerts(dbField) {
selectBox = document.getElementById(`${dbField}_selected`).childNodes; //List of nodes to remove
availBox = document.getElementById(`${dbField}_available`); //destination of nodes
console.log(selectBox); //validating contents before loop
for(index of selectBox){
availBox.appendChild(index); //appending items to destination
}
}
Relevant HTML:
<div class="form-group">
<label for="id_default_operating_schedule">Day Of Week</label>
<div id="default_operating_schedule" class="col-md-12 nopadding twocolumndroppable">
<div id="default_operating_schedule_selected" class="col-md-6 droppable available ui-droppable">
<div id="default_operating_schedule_code_1" class="col_md_5 draggable bg-primary ui-draggable ui-draggable-handle" data-id="1">Sunday</div>
<div id="default_operating_schedule_code_4" class="col_md_5 draggable bg-primary ui-draggable ui-draggable-handle" data-id="4">Wednesday</div>
</div>
<div id="default_operating_schedule_available" class="col-md-6 droppable ui-droppable">
<div id="default_operating_schedule_code_2" class="col_md_5 draggable bg-primary ui-draggable ui-draggable-handle" data-id="2">Monday</div>
<div id="default_operating_schedule_code_3" class="col_md_5 draggable bg-primary ui-draggable ui-draggable-handle" data-id="3">Tuesday</div>
<div id="default_operating_schedule_code_5" class="col_md_5 draggable bg-primary ui-draggable ui-draggable-handle" data-id="5">Thursday</div>
<div id="default_operating_schedule_code_6" class="col_md_5 draggable bg-primary ui-draggable ui-draggable-handle" data-id="6">Friday</div>
<div id="default_operating_schedule_code_7" class="col_md_5 draggable bg-primary ui-draggable ui-draggable-handle" data-id="7">Saturday</div>
</div>
</div>
</div>
Contents of selectBox simple example: [<div element 1>, <div element 4>]
after the first (and only) iteration of the for loop, <div element 1> is moved to availBox, the loop terminates and the contents of selectBox remains [<div element 4>].
I have attempted an indexed forloop which provides either index out of bounds or the same result of items being left in select box.
A reverse iteration of an indexed forloop moves everything as necessary, the major focus of the question is more why does append alter the list dynamically and cause this side effect.
You need to cast the child nodes to an array so it's iterable.
function resetm2mAlerts(dbField) {
selectBox = document.getElementById(`${dbField}_selected`).childNodes; //List of nodes to remove
availBox = document.getElementById(`${dbField}_available`); //destination of nodes
[...selectBox].forEach(child => availBox.appendChild(child));
}
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 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 :)