I developed a HTML5 drag and drop based on tutorial from html5rocks
It work ok on desktops browsers, but does not work on touch devices (I am testing on iPad).
Someone know how can I handle the drag events on touch devices?
Some HTML5 native events work in WebKit eg touchstart, touchmove, touchend, touchcancel but not all of them.
Generally, drag/drop and touch do not really play nicely together.
Better to look at the various touch frameworks and use the built-in gestures.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/OEBPS" xmlns:ibooks="http://apple.com/ibooks/html-extensions">
<head>
<title>Demo 2: Drag and drop</title>
<meta charset="utf-8"/>
<style type="text/css">
/* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */
#mainContainer{
width:600px;
margin:0 auto;
margin-top:10px;
border:1px solid #000;
padding:2px;
}
#capitals{
width:200px;
float:left;
border:1px solid #000;
background-color:#E2EBED;
padding:3px;
height:400px;
}
#countries{
width:300px;
float:right;
margin: 4px 61px 3px -8px;
height:400px;
}
#labels{
width: 120px;
float:right;
margin: -403px 116px 3px -8px;
height:400px;
/*border: 1px solid red;*/
}
.dragableBox,.dragableBoxRight{
width:80px;
height: 10px;
border:1px solid #000;
background-color:#FFF;
margin-bottom:5px;
padding:10px;
font-weight:bold;
text-align:center;
}
.dragableBox,.labelBoxRight{
width:80px;
height: 10px;
border:1px solid #000;
background-color:#FFF;
margin-bottom:5px;
padding:10px;
font-weight:bold;
text-align:center;
}
div.dragableBoxRight{
height: 31px;
width:110px;
/*float:left;*/
margin-right:5px;
padding:5px;
background-color:#D3D3D3;
border: 1px dashed;
}
div.labelBoxRight{
height: 31px;
width:110px;
/*float:left;*/
margin-right:5px;
padding:5px;
background-color:#E2EBED;
}
.dropBox{
width:190px;
border:1px solid #000;
background-color:#E2EBED;
height:400px;
margin-bottom:10px;
padding:3px;
overflow:auto;
}
a{
color:#F00;
}
.clear{
clear:both;
}
img{
border:0px;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="capitals">
<div id="dropContent">
<div class="dragableBox" id="box1">Br<sup>+</sup></div>
<div class="dragableBox" id="box2">Br<sup>−</sup></div>
<div class="dragableBox" id="box3">CN<sup>−</sup></div>
<div class="dragableBox" id="box4">NO<sub>2</sub><sup>+</sup></div>
<div class="dragableBox" id="box5">NO<sub>2</sub><sup>−</sup></div>
<div class="dragableBox" id="box6">NH<sub>2</sub><sup>−</sup></div>
<div class="dragableBox" id="box7">RC=C<sup>−</sup></div>
<div class="dragableBox" id="box8">MeCO<sup>+</sup></div>
</div>
</div>
<div id="countries">
<div id="box106" class="dragableBoxRight"></div>
<div id="box107" class="dragableBoxRight"></div>
<div id="box101" class="dragableBoxRight"></div>
<div id="box104" class="dragableBoxRight"></div>
<div id="box105" class="dragableBoxRight"></div>
<div id="box102" class="dragableBoxRight"></div>
<div id="box103" class="dragableBoxRight"></div>
<div id="box108" class="dragableBoxRight"></div>
</div>
<div id="labels">
<div id="boxl106" class="labelBoxRight">nucleophiles</div>
<div id="boxl107" class="labelBoxRight">Electrophiles</div>
<div id="boxl101" class="labelBoxRight">nucleophiles</div>
<div id="boxl104" class="labelBoxRight">Electrophiles</div>
<div id="boxl105" class="labelBoxRight">nucleophiles</div>
<div id="boxl102" class="labelBoxRight">Electrophiles</div>
<div id="boxl103" class="labelBoxRight">nucleophiles</div>
<div id="boxl104" class="labelBoxRight">nucleophiles</div>
</div>
<div class="clear"></div>
<div class="konaBody"></div>
</div>
<div id="debug"></div>
<input type="button" value="reset" name="reset" onclick="r1();"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/drag-drop-custom.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<!-- <link href="css/jquery-ui.css" rel="stylesheet"
type="text/css" />-->
<script type="text/javascript">
<![CDATA[
// Custom drop action for the country boxes
function dropItems(idOfDraggedItem,targetId,x,y)
{
var targetObj = document.getElementById(targetId); // Creating reference to target obj
var subDivs = targetObj.getElementsByTagName('div'); // Number of subdivs
if(subDivs.length>0 && targetId!='capitals')return; // Sub divs exists on target, i.e. element already dragged on it. => return from function without doing anything
var sourceObj = document.getElementById(idOfDraggedItem); // Creating reference to source, i.e. dragged object
var numericIdTarget = targetId.replace(/[^0-9]/gi,'')/1; // Find numeric id of target
var numericIdSource = idOfDraggedItem.replace(/[^0-9]/gi,'')/1; // Find numeric id of source
if(numericIdTarget-numericIdSource==100){ // In the html above, there's a difference in 100 between the id of the country and it's capital(example:
// Oslo have id "box1" and Norway have id "box101", i.e. 1 + 100.
sourceObj.style.backgroundColor='#0F0'; // Set green background color for dragged object
}else{
sourceObj.style.backgroundColor=''; // Reset back to default white background color
}
if(targetId=='capitals'){
// Target is the capital box - append the dragged item as child of first sub div, i.e. as child of <div id="dropContent">
targetObj = targetObj.getElementsByTagName('div')[0];
}
targetObj.appendChild(sourceObj); // Append
}
function r1()
{
}
var dragDropObj = new DHTMLgoodies_dragDrop(); // Creating drag and drop object
// Assigning drag events to the capitals
dragDropObj.addSource('box1',true); // Make <div id="box1"> dragable. slide item back into original position after drop
dragDropObj.addSource('box2',true); // Make <div id="box2"> dragable. slide item back into original position after drop
dragDropObj.addSource('box3',true); // Make <div id="box3"> dragable. slide item back into original position after drop
dragDropObj.addSource('box4',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box5',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box6',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box7',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box8',true);
// Assigning drop events on the countries
dragDropObj.addTarget('box101','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box102','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box103','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box104','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box105','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box106','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box107','dropItems');
dragDropObj.addTarget('box108','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('capitals','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.init(); // Initizlizing drag and drop object
]]>
</script>
</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
This is my html:
<div style="width: 45%; float: left; margin-left:5%">
<div class="chartHeaderClass" style="width: 100%;">
<h3>Service Level Per Campaign</h3>
<%-- Start Dropdown Code --%>
<a id="DropdownSeviceLink" href="#">+</a>
<div ID="campaignDiv" runat="server" ><ul>
</ul>
</div>
<script type="text/javascript" src="Scripts/DropdownCheckbox.js"></script>
<%-- End Dropdown Code --%>
</div>
<div id="line-chart" class="chart-holder" style="border:1px solid #D5D5D5; margin-top:2px">
<canvas class="overlay" width="479" height="265"></canvas>
</div>
</div>
<div style="width: 45%; float: right">
<div class="chartHeaderClass" style="width: 100%;">
<h3>Calls Per Campaign</h3>
</div>
<div id="pie-chart" class="chart-holder" style="border:1px solid #D5D5D5; margin-top:2px">
<canvas class="overlay" width="479" height="265"></canvas>
</div>
</div>
notice that it has this div campaignDiv which I fill in c# like this:
if (!IsPostBack) {
List<string> comps = getCompainNames();
string html = "<ul>";
for (int i = 0; i < comps.Count(); i++) {
html = html + CreateLiCheckbox(comps[i]);
}
html = html + "</ul>";
campaignDiv.InnerHtml = html;
}
private string CreateLiCheckbox(string checkBoxText)
{
return string.Format("<li><input type=\"checkbox\">{0}</li>", checkBoxText);
}
This result is this:
I can't click on the checkboxes. In other words, when I click on them nothing happens
I noticed something
I can't select the text inside the red area. It seems that it is not exit because when I tried to select it using the mouse, nothing becomes selected.
could u help please?
css for this red area is
#DropdownSeviceLink {
float:right;
margin-right:10px;
}
a#DropdownServiceLink:visited {
color:inherit;
}
#campaignDiv {
background-color:red;
width:200px;
height:200px;
float:right;
position:relative;
}
Finally the context of my page is
when clicking on that plus sign, I want to show this red area, I can do that on jquery, but I just told you the context maybe that helps
jsfiddle
http://jsfiddle.net/jdhMs/
I had this exact same issue in my application and it turned out that the div I had my checkboxes in was being overlapped by the footer of the modal box. Since the footer of the modal box was white/transparent, this wasn't evident until I added a border around the footer. Only then I was able to see that I could see the checkboxes but couldn't actually select them.
I don't know its work or not but try Z-Index.
Example:
#campaignDiv {
Z-Index:100;
}
li{
Z-Index:101;
}
the chrome dev tools now support to show paint rectangles,it really helps.but i found some strange thing that sometimes the repaint area is too large to understand.
this is my code
<style type="text/css">
div { width:500px; height:30px; border:1px solid red; margin:20px;}
div.inner { width:400px; height:20px; border:1px solid green; margin:5px;}
</style>
<div id="txt"></div>
<div></div>
<div>
<div class="inner">
<script> document.write(111);</script>
</div>
</div>
<script src="http://chillrain.com/api/sleep.php?time=9"></script>
<div>
<div class="inner">
<script> document.write(222);</script>
</div>
</div>
<script src="http://chillrain.com/api/sleep.php?time=10"></script>
<div>
<div class="inner">
<script> document.write(333);</script>
</div>
</div>
<script src="http://chillrain.com/api/sleep.php?time=11"></script>
<div></div>
<div></div>
<script> setTimeout( function(){
document.getElementById('txt').innerHTML = "Hello World!"
} ,1000);
</script>
notice:sleep.php will sleep seconds and then return nothing, using it to block the page's rendering.
the first step,seems ok,it paints the whole page
the second step,donot u think the repaint area is too large?
the third step,too large ...
the fourth step, seems okay , it repaint the whole page again.
the fifth step,seems okay, it only repaint the 'txt' div
why the second and the third steps repaint so large area?
I have sort of a image carousel which automatically and on hover swaps image thumbs with a big image header. And this is working perfectly, but now I have realized that I want to add some indication to each thumb currently displayed. I thought I could apply div.container img.current and give it some properties, values.. but it did not work.
So I thought I could ask you all for a good valid quick solution.
Here is my code
<div class="container-thumbs">
<div class="big-image-thumbnail">
<a href=".html"onmouseover="document.getElementById('bigImage').src='.jpg'">
<img src=".jpg" /></a><p>Title</p>
</div>
use j-query toggleClass() function
here is an example
<head>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder;
cursor:pointer; }
.blue { color:blue; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p class="blue">Click to toggle</p>
<p class="blue">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
<script>
$("p").click(function () {
$(this).toggleClass("highlight");
});
</script>
</body>
Using jQuery UI's Droppable I have made a shelf type thing where the items contained on it can be moved. Here's the code: http://jsfiddle.net/JoeyMorani/7LWj4/
Is it possible to actually change the HTML of the shelf, so when the '.boxArt' divs are moved, they are also moved in the HTML. At the moment it seems to only change the position of the div and not actually move it.
I want to do this so I can detect where the divs are. (What their parent div is)
Thanks for the help! :)
I made some changes to the HTML and CSS from your demo but I have something working. The HTML is simpler and has not affected the result, although if you need the previous layout my answer might not be totally right for you.
The full code is duplicated below as well as in a jsFddle demo. The code actually becomes a lot simpler after detaching the .boxArt and moving it in the DOM, since the animation just needs to change the top and left back to 0. The only difficult part was calculating the correct position to set the .boxArt to before animating. This is due to the draggable being relatively positioned to the element it was dragged from. As soon as it is moved in the DOM, this position is now completely incorrect. So the code works out and sets the draggable relative position to the new parent first (after moving it in the DOM) and then animates back to top:0,left:0.
This is working for me in Chrome but I have not tested in any other browsers. console.log left in to show what's going on.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style type="text/css">
.shelfRow {
width:1865px;
height:280px;
}
#shelves {
position:relative;
width:950px;
height:566px;
background:#CCC;
border:1px solid #333;
overflow-y:hidden;
overflow-x:auto;
}
.drop {
width:155px;
height:200px;
padding:2px;
margin-top:30px;
margin-left:25px;
float:left;
position:relative;
}
.dropHover {
padding:0px;
border:2px solid #0C5F8B;
-webkit-box-shadow: 0 0 3px 1px #0C5F8B;
box-shadow: 0 0 3px 1px #0C5F8B;
-moz-box-shadow: 0 0 20px #0C5F8B;
}
.boxArt {
width:155px;
height:200px;
-webkit-box-shadow: 0 0 8px 1px #1F1F1F;
box-shadow: 0 0 8px 1px #1F1F1F;
-moz-box-shadow: 0 0 20px #1F1F1F;
color:#000;
background:#FFF;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
var shelfOffset = $('#shelves').offset();
var dropMarginTop = parseInt($('.drop').css('marginTop'));
var dropMarginLeft = parseInt($('.drop').css('marginLeft'));
$('.drop').droppable({
accept: function(el) {
return $(this).children('.boxArt').length === 0 && el.hasClass('boxArt');
},
tolerance: 'intersect',
hoverClass: 'dropHover',
drop: function(event, ui) {
ui.draggable.detach().appendTo($(this));
var originalOffset = ui.draggable.data('originalOffset');
console.log('originalOffset', originalOffset.top, originalOffset.left);
var boxArt = $(this).children('div');
var boxPosition = boxArt.position();
console.log('boxArt position', boxPosition.top, boxPosition.left);
var container = $(this);
var containerPosition = container.position();
console.log(container, containerPosition.top, containerPosition.left);
var newTop = originalOffset.top + boxPosition.top - containerPosition.top - shelfOffset.top - dropMarginTop;
var newLeft = originalOffset.left + boxPosition.left - containerPosition.left - shelfOffset.left - dropMarginLeft;
console.log('new offset', newTop, newLeft);
boxArt.css({top:newTop,left:newLeft}).animate({top:0,left:0});
}
});
$('.boxArt').draggable({
start: function(event, ui) {
$(this).data('originalOffset', ui.offset);
},
revert: 'invalid'
});
});
</script>
</head>
<body>
<div id="shelves">
<div class="shelfRow">
<div class="drop"></div>
<div class="drop"><div class="boxArt" id="boxArt2">2</div></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div id="drop15"></div>
</div>
<div class="shelfRow">
<div class="drop"><div class="boxArt" id="boxArt1">1</div></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
</div>
</div>
</body>
</html>