I implemented drag 'n' drop on my application using Dragula, but I need to set it so I can drop my elements to more than one div.
I tried to use a class to achieve it, but it just activates the first one of my divs.
THe HTML:
<div role="presentation" class="table table-striped">
<div class="files" id="upload-file"></div>
</div>
<div class="col-md-4">
<div class="drag-container">Test 1</div>
<div class="drag-container">Test 2</div>
<div class="drag-container">Test 3</div>
</div>
The JS calling Dragula:
dragula([document.querySelector('#upload-file'), document.querySelector('.drag-container')]);
How can I drop te items to more than one div?
You can define an array containers:
var containers = $('.drag-container').toArray();
containers.concat($('#upload-file').toArray());
And then, pass the var 'containers' to dragula initializer:
dragula(containers, {
isContainer: function (el) {
return el.classList.contains('drag-container');
}
});
For those without jQuery or $ you can use:
dragula([].slice.call(document.querySelectorAll("drag-container")));
This converts the NodeList to an array and passes it to dragula.
querySelector only returns a single element, you would need to use querySelectorAll in order to get a list of elements. Not sure how dragula would handle getting a two element array, with the second element being an array. You may want to generate the array first, add the '#upload-file' to that array, and then pass the array. Or you could generate the array after initializing, and cycle through the array, adding the elements dynamically using something like "drake.containers.push(container);". I got this construct directly from the github site https://github.com/bevacqua/dragula
HTML:
<div className="wrapper">
<div className="container col-md-4" id="A">
<div className="panel panel-white">
</div>
<div className="panel panel-white">
</div>
</div>
<div className="container col-md-4" id="B">
<div className="panel panel-white">
</div>
<div className="panel panel-white">
</div>
</div>
</div>
JS:
dragula([document.querySelector('#A'), document.querySelector('#B')]);
You can drag each item in one column to the other. You can add more columns with the class name of container.
If you want to specify a custom class name, you should define option like this :
Option:
let options = {
isContainer: (el) => {
return el.classList.contains('drag-container'); // The immediate elements in this container will be draggable
}
Related
I'm using .after() method to inject some html code, I'm doing it inside a loop, everything was working fine. Then I added a div parent to some divs and for some reason the children of those container divs are missing.
const setContent = (sections) => {
let contentElements = sections.map(section => `
<div id="${section.key}_section" class="anchor-tag section-tag">
<div id="${section.key}_section_content">
<div class="subsection-group">
<div id="${section.key}_first_parent_div">
<div id="${section.key}_first_child_div"></div>
<div id="${section.key}_second_child_div"></div>
</div>
<div id="${section.key}_second_parent_div">
<div id="${section.key}_first_child_div"></div>
<div id="${section.key}_second_child_div"></div>
</div>
<div id="${section.key}_outer_alone_child"></div>
</div>
<div>
<div id="${section.key}_other_uncle"></div>
<div id="${section.key}_other_aunt"></div>
</div>
</div>
</div>
`).join("");
$('#div_before').after(`${contentElements}`);
};
setContent(sectionsArr);
If I console.log(contentElements) everything is there, but for some reason after mouting the elements, both _first_child_div and _second_child_div are missing. All sections (divs id="${section.key}_section) that have lost child start with style="display: none;", I don't know how to debug it, and I couldn't find anything on .after() api that could relate to that issue
In my bootstrap website I added fullpage.js, so when a dynamically one class want to add to the page. But two dynamic class added on same element at same time.
So it changed the functionality.
One class only add to the element.
I tried but didn't worked.
Can you please help me to solve this problem.
This is my code, in this code(fp-tableCell) class added two times
<section class="icon-section fp-section fp-table active" id="section-1">
<div class="fp-tableCell" style="height:600px;">
<div class="fp-tableCell" style="height:600px;">
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-12 col-xs-12">
<img src="images/product-1.png" alt="img" class="max-width">
</div>
<div class="col-md-5 col-sm-12 col-xs-12 banner-txt">
<h3 class="preHeading"">volant</h3>
<h1 class="mainHeading">an icon for iconoclasts</h1>
<p class="description">Our singular purpose was to create a product not<br>
bound by convention.
Volant is the realization of that<br> dream.</p>
</div>
</div>
</div>
</div>
</div>
</section>
The code that generates the two <div> elements appears to have been minified and is therefore very difficult to interpret. I think the easiest way to solve this problem would be to remove the duplicate <div> elements from all of the <section> elements after the document has loaded. To do this, you can insert the following code just before your closing </body> tag:
<script>
var sectionElems = document.getElementsByTagName("section"); //creates an array containing all <section> elements
var outerDiv;
var innerDiv;
//loop through each <section> element found and remove duplicate <div> element
for(var i = 0; i < sectionElems.length; i++){
outerDiv = sectionElems[i].children[0];
innerDiv = outerDiv.children[0];
//check class names to make sure it is a duplicate element
if(outerDiv.className == innerDiv.className){
outerDiv.innerHTML = innerDiv.innerHTML;
}
}
</script>
This code loops through each <section> element and writes the content of the nested <div> element into the parent <div> element, basically overwriting itself without including the nested <div> element.
I want to get each ID from a series of slides (section and aside elements), then assign those IDs to the corresponding navigation element's data-target attribute as it's value. I'm using the gridscroll.js plugin, so the nav elements are created dynamically.
The plugin I'm using is here (in case that helps):
https://github.com/mknecht/gridscrolling.js
My HTML:
(I'd like to grab the IDs from each of these elements...)
<section id="section-1a"></section>
<section id="section-2a"></section>
<aside id="section-2b"></aside>
<aside id="section-2c"></aside>
<aside id="section-2d"></aside>
<section id="section-3a"></section>
<aside id="section-3b"></aside>
<aside id="section-3c"></aside>
<section id="section-4a"></section>
<aside id="section-4b"></aside>
<section id="section-5a"></section>
The JQ I used to add an attribute to each dynamically created nav element. I just inserted numbers as a placeholder:
$(document).ready(function(){
$(".gridscrolling-overview-square").each(function(index) {
$(this).attr("data-target", index);
});
I am grabbing the IDs and putting them into an array:
var slideids = $(".slides").map(function(){
return this.id;
}).get();
The navigation markup that the plugin renders on page load with my unique data-target values added:
(I'd like to assign the IDs values that I grabbed to each of it's corresponding nav elements' data-target attributes. The nav items and their corresponding slides are each in sequential order. )
<div id="gridscrolling-overview">
<div class="gridscrolling-overview-square gridscrolling-ov-main" data-target="0"></div>
<div class="gridscrolling-overview-square gridscrolling-ov-main gridscrolling-looking-at" data-target="1"></div>
<div class="gridscrolling-overview-square gridscrolling-ov-aside" data-target="2"></div>
<div class="gridscrolling-overview-square gridscrolling-ov-aside" data-target="3"></div>
<div class="gridscrolling-overview-square gridscrolling-ov-aside" data-target="4"></div>
<div class="gridscrolling-overview-square gridscrolling-ov-main" data-target="5"></div>
<div class="gridscrolling-overview-square gridscrolling-ov-aside" data-target="6"></div>
<div class="gridscrolling-overview-square gridscrolling-ov-aside" data-target="7"></div>
<div class="gridscrolling-overview-square gridscrolling-ov-main" data-target="8"></div>
<div class="gridscrolling-overview-square gridscrolling-ov-aside" data-target="9"></div>
<div class="gridscrolling-overview-square gridscrolling-ov-main" data-target="10"></div>
</div>
Also, if there is a better approach than the one I have started, I'm open to suggestions :)
Thanks in advance!
This should work if everything is in the same order:
$(document).ready(function(){
$(".gridscrolling-overview-square").each(function(index) {
$(this).attr("data-target", slideids[index]);
});
If not, when you can create the elements you can assign them ids with a counter so you can map things properly:
$(this).attr("id", "slide"+index);
I have a div structure as
<div class="hours_logged">
<div class="time_item">
<div class="record_id"></div>
<div class="time_logged">0</div>
<div class="desc"></div>
</div>
</div>
I am adding new items dynamically. When I add new time I save that via AJAX call and update my DOM. The above is the DOM that I want to update. If user adds 2 new times I want to add another "time_item" DIV and populate values in that. I am already using jquery each function and I get the index number right for the DIV but how do I check like if index is 2 then
if(!$('.hours_logged').eq(index))
{
$('.hours_logged').append(' <div class="time_item">
<div class="record_id"></div>
<div class="time_logged">0</div>
<div class="desc"></div>
</div>');
}
try this:
if($('.hours_logged').length < 1)
{
$('.hours_logged').append(' <div class="time_item"><div class="record_id"></div><div class="time_logged">0</div><div class="desc"></div></div>');
}
i am using IPB and i am going to put each category into a new tab the category div is something like this:
<div id='category_100'>
<div id='category_104'>
<div id='category_102'>
<div id='category_101'>
and my tabs content is like this:
<div class="content">
<div id="content-1" class="content-1">
</div>
</div>
and the categories divs is already showing but i want it to be moved to the content-1 div without duplicate so i want it to move from its div to this div with jjava script how?
<script>
document.getElementById('content-1').appendChild(
document.getElementById('category_100')
);
</script>
this worked for me but how can i add more than id to category_100
i want it to be like this in one script code so i would not repeart the scrip code four times:
<div class="content">
<div id="content-1" class="content-1">
<div id='category_100'>
<div id='category_104'>
<div id='category_102'>
<div id='category_101'>
</div>
</div>
using my two lines the suggested things here is not working!
Try this code :
$('div[id^="category_"]').appendTo('#content-1')
Have a look to this fiddle : http://jsfiddle.net/lulu3030/sjEPx/2/
"using my two lines the suggested things here is not working!"
You just get a single element with an ID and trying to append it...
Live Demo
If you want to append multiple elements, there are many ways...
Wrap those elements and then append...
<div id="categories">
<div id='category_100'></div>
<div id='category_104'></div>
<!-- etc. -->
</div>
document.getElementById('content-1').appendChild(document.getElementById('categories'));
or add same class to all elements that you want to append...
<div id='category_100' class="myClass"></div>
<div id='category_104' class="myClass"></div>
[].forEach.call(document.getElementsByClassName("myClass"), function (value, index, array) {
document.getElementById("content-1").appendChild(value);
});
or get elements with query selector that match some pattern...
[].forEach.call(document.querySelectorAll("div[id^='category_']"), function (value, index, array) {
document.getElementById("content-1").appendChild(value);
});
and etc.