I have a HTML5 drag and drop function. You can drag an item from div1 to div2.
What I want to do is for every item dropped into div2, automatically give it a list number.
At the minute the JS code for adding the text to div2 looks like this:
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild( document.getElementById(data));
}
Above drops the element into div2. Below describes the drag function.
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
The html looks like this:
<div id="div1" ondrop="drop(event)">
<div id="title" draggable="true" ondragstart="drag(event)" style="font-family:Metacopy">Text to be Dragged</div>
</div>
<div id="div2" ondrop="drop(event)"></div>
I'd be grateful for any help. Sorry if the answer is glaringly obvious, I'm kind of new to this.
Related
i have some <div></div> elements with draggable="true" attribute but same thing gets applied on child elements,but i dont want to apply it on child elements, So how do i prevent this default behavior?
code :
<div draggable="true" ondragstart="play(event)" ondrop="pause(event)" id="move">
<span id="text">
drag me
</span>
</div>
as i used dragable="true" on <div> so span also gets the same property.
I was having a similar event with a sortable drag-and-drop "list" I created. Each "row" of the list looks like this.
<div class='row' draggable='true'>
<div class='drag-handle' ></div>
<img class='icon-image' draggable='false'>
<input type='text' name='demo' >
<button class='remove-btn' onclick='removeItem(this,event)'>Remove</button>
</div>
When I tried selecting the text inside of the "input" element, somehow I would start dragging the whole "row". As frustrating as this was, the best solution I found was to simply apply the draggable='true' property to the item with the class="drag-handle" which would be my dragging icon that would fire the ondragstart(e) event.
The rest can be handled in JS
In JS, reference the parent element "row" by using the closest(".row") method
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll('.drag-handle').forEach(handle => {
handle.addEventListener("dragstart", dragStart)
handle.addEventListener("drag", dragging)
handle.addEventListener("dragend", dragEnd)
})
function dragStart(e) {
document.querySelectorAll(".row").forEach(row=>{
row.addEventListener("dragover", dragOver)
})
var target_row = e.target.closest(".row")
target_row.classList.add("dragging")
}
Note:
I added a class of "dragging" to the one "row" that was going to be dragged so I could do a querySelectorAll('.row:not(.dragging)') for other operations, classes, etc, however, this is NOT required for the intended purpose to work. Just a bit more context that hope helps your problem.
I have a drag and drop html5 function which works fine :
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
So I set it on two elements lets say those two:
<div id="div1" id="drag1" draggable="true" ondragstart="drag(event)">
<h3> Monday </h3>
</div>
<div id="div1" id="drag1" draggable="true" ondragstart="drag(event)">
<h3> Tuesday </h3>
</div>
It works fine with the first element, but when I try to drag and drop the second one, it keeps droping the first one. I have also tested it on multiple items: only the first item drops when I drag any item ?
This is probably because you have 2 elements with the same ID: drag1. You should avoid giving your elements the same ID
I am building a schedule view, which is currently in a preliminary stage, where I add events and then I can rearrange them, either by dragging the event vertically upwards or downwards, or by resizing it vertically. For resizing, I'll click a button contained within the event and drag it up or down to resize the event. For a better view, please have a look at this opensource calendar.
I am currently facing an issue, in making my elements draggable. None of the drag events fire, although other (click, mouseover) do work. The following are snippets from what I've done till now. Please excuse me for my work, I'm still a little rusty at Angular.
*.component.html:
<table>
<tbody *ngFor="let item of FullHours; let i = index" >
<tr [ngSwitch]="returnItem(Doc)" [ngStyle]="{'background-color':returnItem(Doc) === ',' ? 'white' : 'yellow' }">
<td [style.height.px]="unitHeight" >
<div ondrop="drop($event)" ondragover="allowDrop($event)" *ngIf="hasEvent(i)" class="event-container" style="background-color: white;">
<div class="event" draggable="true" ondragstart="drag($event)">
<div style="width:100%; float:left" class="content">04:30PM -- 05:30PM</div>
<div style="width:100%; float:left" class="content">event {{i}}</div>
<button draggable="true" (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)" class="eventbtn" style="position: absolute; left:0; right:0; bottom:0" >
=
</button>
</div>
</div>
<div *ngIf="!hasEvent(i)" (click)="createEvent(i)" class="event-container"></div>
</td>
</tr>
</tbody>
</table>
*.component.ts:
onDrop(event: any) {
alert('on-drop');
event.preventDefault();
event.stopPropagation();
// your code goes here after droping files or any
//try to change height
}
onDragOver(evt) {
alert('on-drag-over');
evt.preventDefault();
evt.stopPropagation();
}
onDragLeave(evt) {
alert('on-drag-leave');
evt.preventDefault();
evt.stopPropagation();
}
I've put in alerts on all binded functions, but none of them work. I did try this earlier with the whole event too but it still didn't work. I've created simple drag and drop divs wit JavaScript code but even those don't work in here. Do let me know if I need to provide anything else.
I'd be grateful for any guidance that can make my drag and drops work. Thanks in advance.
Basically, I want to put a inside . However, the ion-slide swipe is so sensitive, so I cannot scroll the content in . It just swipes to the next slide.
Is it possible to disable the swipe action in a certain area in ?
As shown in the picture, I want to disable the swipe action on the B area. I guess (if possible) I need to put some class in ion-scroll and/or div under it, but I could not figure it out.
This is my partial HTML code:
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
... // A area content
<ion-scroll direction="x" ...>
<div style="width: 5000px; height: 100px" ...>
// B area. Very wide content
</div>
</ion-scroll>
... // C area content
</ion-slide>
</ion-slide-box>
I really appreciate your help.
Here's another approach:
add these to the wide element:
<div on-touch="mouseoverWideDiv()" on-release="mouseleaveWideDiv()">
then in your controller:
$scope.mouseoverWideDiv = function() {
$ionicSlideBoxDelegate.enableSlide(false);
};
$scope.mouseleaveWideDiv = function() {
$ionicSlideBoxDelegate.enableSlide(true);
};
Here is another way of doing this:
In your controller add a function:
$scope.disableSwipe = function() {
$ionicSlideBoxDelegate.enableSlide(false);
};
In your view add the ng-init attribute on the slide-box element
<ion-slide-box ng-init="disableSwipe()">
This will disable the slide-event.
You can now use a controller function to slide to a given index like this:
Since google sent me here when i was searching for solutions using ion-slides (instead of ion-slide-box) i will leave here the solution i ended up using.
One thing first: ion-slide-box is currently deprecated, so you should use ion-slides now.
First set options variable in ion-slides element:
<ion-slides options="options">
Then inside your controller you should configure the options variable with the noSwiping options as follows:
$scope.options = {
noSwiping: true,
noSwipingClass: 'do_not_swipe',
}
And then, in an element inside your ion-slide-page add the "do_not_swipe" class to the element you want swipe to be disabled.
Taking your code as an example, you should have your html like this:
<ion-slides options="options">
<ion-slide-page>
... // A area content
<ion-scroll class='do_not_swipe' direction="x" ...>
<div style="width: 5000px; height: 100px" ...>
// B area. Very wide content
</div>
</ion-scroll>
... // C area content
</ion-slide-page>
</ion-slides>
I am trying to make a simple educational game for kids, where they will drag and drop pictures of planets and need to put them in the correct boxes in the correct order.
What I'm trying to figure out is the JS needed to let check the element being dropped on a box is the one that will match that box. The code I have so far allows me to drag and drop but has no check. Here is what I have:
<script type="text/javascript">
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("content", ev.target.id);
}
function drop(ev){
ev.preventDefault();
var image= ev.dataTransfer.getData("content");
ev.target.appendChild(document.getElementById(image));
}
</script>
<section id="planetbox">
<img id="mercuryImg" draggable="true" ondragstart="drag(event)" src="./images/planets/mercury.gif">
</section>
<section id="mercurybox"ondrop="drop(event)" ondragover="allowDrop(event)"> </section>
Any help would be really great. P.S. needs to use HTML 5, CSS and JS only no libraries :)
I managed to solve my issue using the code below on the function drop(ev):
function drop(ev){
ev.preventDefault();
var image= ev.dataTransfer.getData("content");
if ( image == ev.target.id) {
ev.target.appendChild(document.getElementById(image));
}
else {
}
}