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>
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 placed a slider in my blogspot using bxslider but now the link (the title of the book) is not working. See phlawdigest.blospost.com to see the actual site. Below are the codes I used.
The Jquery Code is as follows:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" type="text/css" />
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<script>
$(document).ready(function() {
$('.image-left').bxSlider({
auto: true,
pause: 50000,
// in millisecond
autoHover: true, // pause on hover
autoControls: true,
captions: false,
});
});
HTML code is as follows:
<div class="image-left">
<div>
<img src="URL link/>
<h2> Book Title One</h2>
<p>some text description</p>
</div>
<div>
<img src="URL link"/>
<h2> Book Title Two</h2>
<p>some text description</p>
</div>
</div>
bxSlider support jquery3.1.1 and you can not give appropriate css properties for your html class...
<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<style>
.selected {
color: red;
}
.highlight {
background: yellow;
}
.image-left {
text-align: center;
}
img
{
width: 100%;
height: 320px;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager
{
text-align: center !important;
}
</style>
</head>
<body>
<div class="image-left">
<div>
<img src="https://images.pexels.com/photos/50594/sea-bay-waterfront-beach-50594.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<h2>
Book Title One
</h2>
<p>some text description</p>
</div>
<div>
<img src="https://images.pexels.com/photos/531321/pexels-photo-531321.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<h2> Book Title Two</h2>
<p>some text description</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function() {
$('.image-left').bxSlider({
auto: true,
pause: 50000,
touchEnabled: false,
// in millisecond
autoHover: true, // pause on hover
controls: true,
captions: false,
});
});
</script>
</body>
</html>
syntax error:
<img src="URL link/> <------missing last quotation. Was that a typo when proving the demo code, or is it missing on the actual code? Because that would stop it working.
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
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.
I'm trying to get a javascript on my site so when a person scrolls on the website, it automatically scrolls to the next or previous Div with a certain class. I'm working with smoothscroll and scrollto. I also found two codes that I'm trying to combine. But I don't seem to understand the whole scripts...
The first script is from http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery. This script makes it possible to navigate between DIV's (with a certain class) by pressing next or previous.
The second script is from How to enforce a "smooth scrolling" rule for mousewheel, jQuery? (last post) and makes it possible to make the website scroll (smooth) down or up for a certain amount of pixels when scrolling.
I wanted to combine these two but it's not really straight forward for me :/
It would be nice if someone could point me how to do this. Thanks
Best regards,
Billy Beach
Dear lalibi,
Thanks for your answer. I tried your code, but don't seem to get it work. Here is the code I used:
<head>
<script type="text/javascript" src="Box/jquery.js"></script>
<SCRIPT src="Box/jquery.min.js"></SCRIPT>
<SCRIPT src="Box/jquery.scrollTo-1.4.2-min.js"></SCRIPT>
<SCRIPT src="Box/jquery.localscroll-1.2.7-min.js"></SCRIPT>
<script type="text/javascript" src="Box/jquery.mousewheel.min.js"></script>
<style type="text/css">
<!--
div {
border: 1px solid black;
height: 50px;
}
div.current {
background-color: orange;
}
-->
</style>
<script type="text/javascript">
var current
$(function() {
$('body').mousewheel(function(event, delta) {
var $current = $('div.current');
console.log(delta);
console.log($current);
if (delta > 0) {
$prev = $current.prev();
if ($prev.length) {
$('body').scrollTo($prev, 100);
$current.removeClass('current');
$prev.addClass('current');
}
} else {
$next = $current.next();
if ($next.length) {
$('body').scrollTo($next, 100);
$current.removeClass('current');
$next.addClass('current');
}
}
event.preventDefault();
});
});
</script>
</head>
<body>
<div class="current" id="div">1</div>
<div id="div">2</div>
<div id="div">3</div>
<div id="div">4</div>
<div id="div">5</div>
<div id="div">6</div>
<div id="div">7</div>
<div id="div">8</div>
<div id="div">9</div>
<div id="div">10</div>
<div id="div">11</div>
<div id="div">12</div>
<div id="div">13</div>
<div id="div">14</div>
<div id="div">15</div>
<div id="div">16</div>
<div id="div">17</div>
<div id="div">18</div>
<div id="div">19</div>
<div id="div">20</div>
<div id="div">21</div>
<div id="div">22</div>
<div id="div">23</div>
<div id="div">24</div>
<div id="div">25</div>
<div id="div">26</div>
<div class="current" id="div">27</div>
<div id="div">28</div>
<div id="div">29</div>
<div id="div">30</div>
<div id="div">31</div>
<div id="div">32</div>
<div id="div">33</div>
<div id="div">34</div>
<div id="div">35</div>
<div id="div">36</div>
<div id="div">37</div>
<div id="div">38</div>
<div id="div">39</div>
<div id="div">40</div>
<div id="div">41</div>
<div id="div">42</div>
<div id="div">43</div>
<div id="div">44</div>
<div id="div">45</div>
<div id="div">46</div>
<div id="div">47</div>
<div id="div">48</div>
<div id="div">49</div>
<div id="div">50</div>
<div id="div">51</div>
<div id="div">52</div>
<div id="div">53</div>
<div id="div">54</div>
<div id="div">55</div>
<div id="div">56</div>
<div class="current" id="div">57</div>
</body>
</html>
EDIT: I tweaked the fiddle a little bit. One of the two external scripts was using http: and since the link (before the edit) used https:, Chrome blocked it unless you pressed the little shield icon. I also updated to latest version.
This seems to work fine: http://jsfiddle.net/9Amdx/1707/
var current;
$(function() {
$('body').mousewheel(function(event, delta) {
var $current = $('div.current');
console.log(delta);
console.log($current);
if (delta > 0) {
$prev = $current.prev();
if ($prev.length) {
$('body').scrollTo($prev, 100);
$current.removeClass('current');
$prev.addClass('current');
}
} else {
$next = $current.next();
if ($next.length) {
$('body').scrollTo($next, 100);
$current.removeClass('current');
$next.addClass('current');
}
}
event.preventDefault();
});
});