I want to create a "drag and drop" for a "fill the gaps" style question, then submit this data through a HTML form.
Example:
I have looked at a few ways of doing this, such as dragging and dropping images - not what I want, or dragging and dropping elements* on a page but I can't figure out how I can make this in to a form input.
Apologies for the W3 Schools link, I know they are not liked around here
Modifying the example you linked gives you:
<!DOCTYPE HTML>
<html>
<head>
<style>
.draggable {background-color:#00ff00;margin:5px;padding:3px;}
#div1,#div2 {display:inline-block;min-width:25px;min-height:10px;border-style:solid;border-width:0px;border-bottom-width:2px;}
</style>
<script>
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.parentNode.replaceChild(document.getElementById(data), ev.target);
document.getElementById(data).className = "";
}
</script>
</head>
<body>
<span class="draggable" id="drag1" draggable="true" ondragstart="drag(event)">drag</span>
<span class="draggable" id="drag2" draggable="true" ondragstart="drag(event)">drop</span>
<br />
This is a sample
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
and
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
sentence.
</body>
</html>
Here's a fiddle of it to play with.
Related
I would like to be able to drag an image next to some text and have the text move with it, the problem is that I can either move the image or move the text not have one move the other my current code for that is:
<ol>
<div style="cursor: move; user-select: none;">
<img style="width: 50px;" src="hand.png" alt="drag">
<h3 style="float: right" contenteditable='true'>sample</h3>
</div>
<h3 contenteditable='true'>sample2</h3>
</ol>
how would I make it so that I can drag the image and have it move the text?
How to drag (and drop) an image back and forth between two elements:
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</style>
<script>
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));
}
</script>
</head>
<body>
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
i am not sure if this is what you are looking for if not, please provide an example of what you need
or you can refer to this link for dragging multiple items:
https://codepen.io/SitePoint/pen/gbdwjj
I'm using the HTML Drag/Drop API W3schools is suggesting (w3schools html drag/drop api)
I'm trying to make something like moving objects from 1 bag to another.
All is working fine so far except when I somehow misclick and drag 1 picture onto the other(instead into free space in the div).
Then the dropped picture is disappearing. When I check the html code, I can see that the dropped img went under the first img.
Probably because of the "child" element in the js code i guess. That is where I need help.
How do I prevent that so I can only drop the images into the divs but not into other images?
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));
}
#div1, #div2 {
float: left;
width: 100px;
height: 350px;
margin: 10px;
padding: 10px;
border: 1px solid black;
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">Bag1
<img src="https://www.w3schools.com/html/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">Bag2
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" draggable="true" ondragstart="drag(event)" id="drag2" width="88" height="31">
</div>
</body>
</html>
just found the answer...
change the drop function to:
function drop(ev, el) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
el.appendChild(document.getElementById(data));
}
and when you call the function:
<div id="div1" ondrop="drop(event, this)" ondragover="allowDrop(event)">
thats it. found the answer here: prevent drop inside a child element when drag & dropping with JS
hello does anybody know how to call a JavaScript function from a div?
my div and function look like this:
#foreach(var c in Model.matrix.Cells)
{
<tr>
<td class="tdHouse" >
<div onload="styleCell(event)" class="cell" id="styleCell" ondrop="drop(event,#c.row,#c.column)" ondragover="allowDrop(event)" alt="one">
</div>
<label hidden id="#c.room.Id" class="existRoomStyle" ondragstart="drag(event)" onmouseup="dragMouseUp(event)" title="#c.room.roomName" style= "background-color:#c.room.color"> #c.room.roomName</label>
<img hidden id="#c.socket.Id" alt="existSocket" class="existSocketStyle" src="~/Images/socket.jpg" draggable="true" ondragstart="drag(event)" onmouseup="dragMouseUp(event)" title="socket" alt="one"/>
<img hidden id="#c.socket.machine.Id"class="existMachineStyle" src="~/Images/MachineImages/#c.socket.machine.Image" draggable="true" ondragstart="drag(event)" title="machine" alt="one"/>
</td>
</tr>
}
<script>
function styleCell(ev) {
ev.target.children[0].appendChild(document.getElementById("existRoomStyle"));
ev.target.children[0].appendChild(document.getElementById("existSocketStyle"));
ev.target.children[0].appendChild(document.getElementById("existMachineStyle"));
}
</script>
You can't call onload this way.
w3schools list where no-load is applicable
You must separate the function call from the div.
See this answer
How to add onload event to a div element?
How could i modify the next code, to do a drag and drop of words?
in such a way that when I select a word of the sentence, I can drag
http://jsbin.com/ejenub/1/edit
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
#div2 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
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));
}
</script>
</head>
<body>
verbs
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
adjetives
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="drag1" draggable="true" ondragstart="drag(event)">I play the guitar</div>
<div id="drag2" draggable="true" ondragstart="drag(event)">The piano is black</div
</body>
</html>
All words should be wrapped in span or another nodes, here working example without modifying source html ;) http://jsbin.com/ejenub/3
You need to wrap each word in a HTML element such as <span>. Here's a modified version of your sample, which shows the dragging and dropping of words.
I upgraded this:
You can no longer drag words inside of other words, instead they fall in front of them within the container.
CSS automatically capitalizes the first word, puts a space between words, and a period at the end.
In this example, you're moving words within or between two sentences.
https://jsbin.com/hayizegisi/edit?html,output
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.container {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
span {cursor: grabbing;}
span::before {content:" "}
span:first-child {text-transform:capitalize}
span:first-child:before {content:""}
span:last-child:after {content:"."}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
console.log(ev)
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
if (ev.target.classList.contains('container')) {
var container = ev.target;
container.appendChild(document.getElementById(data));
} else {
container = ev.target.parentElement;
container.insertBefore(document.getElementById(data), ev.target);
}
}
/* function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}*/
</script>
</head>
<body>
<div class='container' ondrop="drop(event)" ondragover="allowDrop(event)">
<span id="word1" draggable="true" ondragstart="drag(event)">I</span>
<span id="word2" draggable="true" ondragstart="drag(event)">play</span>
<span id="word3" draggable="true" ondragstart="drag(event)">the</span>
<span id="word4" draggable="true" ondragstart="drag(event)">guitar</span>
</div>
<div class='container' ondrop="drop(event)" ondragover="allowDrop(event)">
<span id="word5" draggable="true" ondragstart="drag(event)">the</span>
<span id="word6" draggable="true" ondragstart="drag(event)">piano</span>
<span id="word7" draggable="true" ondragstart="drag(event)">is</span>
<span id="word8" draggable="true" ondragstart="drag(event)">black</span>
</div>
</body>
</html>
I have created a sample web application using jQuery Mobile.
I have created two <div>s; one contains href and another contains the content. When I click on HREF It showing jquery-mobile script Error as like below:
Error Loading Page
Can anybody see what might be causing this error?
<html> <head runat="server"> <title>How to expand collapse div layer using jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-.0a3.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-.0a3.min.css" />
<script language="javascript">
$(document).ready(function () {
var $pages = $('#pages > *').hide();
$('#content a').click(function() {
$pages.hide();
$($(this).attr('href') ).show();
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" class='header_align'>Bristol-Myers Squibb</div>
<h2>
How to expand collapse div layer using jQuery</h2>
<div id="toggle">
<div id="heading">Heading</div>
<div id="content">
<ul>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</div>
</div>
<div id="pages">
<div id="page-1">Page 1 Content</div>
<div id="page-2">Page 2 Content</div>
<div id="page-3">Page 3 Content</div>
</div>
</div>
</body>
</html>
The jQuery mobile default behavior of a link with a named anchor is to jump to a page (data-role="page") with the respective id. But there is no such page for page-1, page-2 or page-3 so the error occurs.
Try this
$(document).ready(function () {
var $pages = $('#pages > *').hide();
$('#content a').click(function() {
$pages.hide();
$($(this).attr('href') ).show();
return false;
});
});