How to move HTML Elements with drag&drop - javascript

Is there a way to move e.g. an input html tag with Drag&Drop? ( JQuery )
like this site here:
click
You can take your html tags from the list on the left hand side and you can move the elements inside the little box...

maybe you should look at jQuery UI which has a built in drag&drop fonctionality

Just have a look at this overview. But I think you are searching for the Droppables: Accepting draggable elements method.
This is the example from the webpage and not from me:
<!doctype html>
<html lang="en">
<head>
<style>
#makeMeDraggable { float: left; width: 300px; height: 300px; background: red; }
#makeMeDroppable { float: right; width: 300px; height: 300px; border: 1px solid #999; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
$( init );
function init() {
$('#makeMeDraggable').draggable();
$('#makeMeDroppable').droppable( {
drop: handleDropEvent
} );
}
function handleDropEvent( event, ui ) {
var draggable = ui.draggable;
alert( 'The square with ID "' + draggable.attr('id') + '" was dropped onto me!' );
}
</script>
</head>
<body>
<div id="content" style="height: 400px;">
<div id="makeMeDraggable"> </div>
<div id="makeMeDroppable"> </div>
</div>
</body>
</html>

Related

IFrame Resizable, but not Draggable with JQuery

I have an iframe displaying "iframetarget.html" (for now just a blank red page for testing purposes). I want to be able to resize it, as well as drag it around without constraint. I used JQuery to make it resizable, and this worked. Then, I added .draggable, and it fails to work. Can you see what I'm doing wrong?
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#iframe {
width: 100%;
height: 100%;
border: none;
background: #eee ;
z-index: 1;
}
#resizable {
width: 100px;
height: 100px;
background: #fff;
border: 1px solid #ccc;
z-index: 9;
}
</style>
<script>
$(function() {
$('#resizable').resizable({
start: function(event, ui) {
$('iframe').css('pointer-events','none');
},
stop: function(event, ui) {
$('iframe').css('pointer-events','auto');
}
});
});
</script>
<script>
$(function() {
$('#resizable').draggable();
});
</script>
</head>
<body>
<div id="resizable">
<iframe src="iframetarget.html" id="iframe">
</div>
</body>
I'm guessing the click is going to the page in the iframe instead of being caught by your div. Resizable automatically add handles so that's why it works. You can add a handle to your draggable or simply put a border. For testing purpose, you'll see that your actual code works if you change your css to:
#iframe {
width: 100%;
height: 100%;
border: solid 10px black;
background: #eee ;
z-index: 1;
}
Then click on the border and it'll drag.
Or you add a small div that works as a handle:
http://api.jqueryui.com/draggable/#option-handle
I had a familiar problem, dragging iFrames with jQueryUi (I've used a dialog and it was only possible to drag it holding the title bar). My solution was using ajax. Try that other way of "including another page":
function loadiframe(){
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("resizable").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","iframetarget.html",true);
xmlhttp.send();
}
If you run loadiframe(); the content of iframetarget will be load to the #resizable element. Be careful using HTML, CSS and JavaScript in both pages, an iFrame just displays the other page in your one, but this will get the source code of iframetarget.html an add it into the div. You won't need HTML-declaration, html-, head- and body-tags in the iframetarget-file.

How to get size of div based on class?

I have the following HTML file that currently has nothing in it except some div class objects that are specified by CSS styles. If I open this web page and inspect the elements in Chrome they are the sizes that I want them to be. What I am wondering is if I can access those sizes via javascript.
HTML File:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>TEST</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
.camp_cont {
float: left;
width: 45%;
height: 50%;
position: relative;
}
.camp_cont_select {
float: left;
width: 45%;
height: 50%;
position: relative;
fill: #800;
}
.sub_camp_cont {
float: left;
width: 15%;
height: 50%;
position: relative;
margin: 10px 25px;
fill: #800;
}
</style>
</head>
<body>
<div class="camp_cont", id="cpa_perf"></div>
<div class="camp_cont", id="ctr_perf"></div>
<div class="sub_camp_cont", id="as_perf"></div>
<div class="sub_camp_cont", id="f_perf"></div>
<div class="sub_camp_cont", id="rh_perf"></div>
<div class="sub_camp_cont", id="rm_perf"></div>
<div class="sub_camp_cont", id="rl_perf"></div>
<div class="sub_camp_cont", id="ul_perf"></div>
<div class="sub_camp_cont", id="rt_perf"></div>
</body>
</html>
I am wondering if I can do something like the following:
x = $("#cpa_perf").width()
Again, when I inspect cpa_perf in Chrome it says its width is 515px. That's what I'm trying to get at
jQuery Width works just fine for this:
x = $("#cpa_perf").width();
alert(x);
JS Fiddle: http://jsfiddle.net/9abcf9d3/
You can use jQuery pretty easily to modify attributes of elements..
$('.classname').css(property, value);
I'm not certain if you are trying to use jQuery or pure javascript.
You're original attempt to get the width of the element should work as long as you're using a jQuery library.
Otherwise, if you just want the width of the element with pure javascript, you can use something like this:
var x = document.getElementById('cpa_perf').offsetWidth;
If you are including a jQuery library then the following should work:
var x = $("#cpa_perf").width()
Additional Note: Make sure that the script isn't called before the DOM element is written to the page as well. For example:
$(document).ready(function (){
var x = $("#cpa_perf").width();
console.log(x);
}) ;

How to fix this jquery function to work in IE?

I am relatively new with Javascript but managed to somehow get this code to work on chrome, firefox, safari but it doesn't properly on IE. First look at this code and then after that I will explain what seems to be not working:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://www.domain.com/test/wtf.css" />
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
var transition = 'slow';
var target1 = $('#flash1');
var target2 = $('#flash2');
var target3 = $('#box2');
var target4 = $('#tble');
var target5 = $('.links');
var target6 = $('#wording');
target1.delay(1000).fadeIn();
target2.delay(2000).fadeIn();
target3.delay(3000).fadeIn();
target4.delay(4000).fadeIn();
target5.delay(5000).fadeIn();
target6.delay(6000).fadeIn();
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#this_is_button").click(function () {
$("#box2").hide();
$("#tble").hide();
$(".links").hide();
$("#second_pls").show();
$("#box2").css("background", "black");
})
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#what_close").click(function () {
$("#second_pls").hide();
$("#tble").show();
$(".snap").show();
$(".links").show();
$("#box").css({
backgroundImage: "url('/test/img.jpg')",
backgroundSize: "800px"});
});
});
</script>
</head>
<body>
<div id="box">
<div id="box2" style="display:none"></div>
<div id="wording" style="display:none">
<label id="flash1" style="display:none">Hello</label>
<label id="flash2" style="display:none">World</label>
</div>
<div id="tble" style="display:none">This is a table</div>
<div id="second_pls" style="display:none">Hello Hello Hello, is this working? come on already?!!
<input type="button" id="what_close" value="Close">
</div>
<div class="links" style="display:none">
<input type="button" id="this_is_button" value="Sample">
</div>
</div>
</body>
</html>
CSS:
#box {
background-color: #000000;
height: 350px;
margin-left: auto;
margin-right: auto;
width: 800px;
}
#box2 {
background-image: url("/test/img.jpg");
background-size: 800px;
height: 550px;
margin-left: auto;
margin-right: auto;
width: 800px;
position: absolute;
}
#wording {
position: relative;
color: #999999;
font-size: 15px;
letter-spacing: 5px;
margin-left: 20px;
padding-top: 30px;
}
#tble {
margin-top: 180px;
position: absolute;
}
#second_pls {
margin-left: 10px;
margin-top: 310px;
position: absolute;
}
.links {
margin-left: 10px;
margin-top: 310px;
position: absolute;
}
So what is the part that doesn't seem to function when the page is rendered in IE? It seems that the fadeIn, fadeOut, hide and show parts are not rendering in IE except #flash1, and #flash2 work, the rest of the fade in, fade out don't work. I am ripping my hair out not understanding why those two would work but not the rest.
I used BrowserStack and it seems that on Windows XP using IE 8 it renders properly with the exception of properly rendering the background image. But on Windows 7 using IE 8, it works the same way as it does on Windows XP but when using IE 9 it gives me the current issue.
What am I doing wrong?
It seems the problem arise from incorrect syntax:
$("#box").css({
backgroundImage: "url('/test/img.jpg')",
backgroundSize: "800px", //<-- extra comma
});
http://jsfiddle.net/bfcZd/3/
vs.
http://jsfiddle.net/bfcZd/4/
You should look at the CSS declarations for the two divs that are working. I suspect they may be position:relative or have some other property that is causing them to render differently (properly) while the other ones fail. Could you provide the CSS that you have set for the divs in your example. It will help us troubleshoot a little better, but without seeing it, this is my hunch.
add this meta tag inside your <head></head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
should work then.
i have it here in this jsfiddle: http://jsfiddle.net/Morlock0821/XtyWC/

JqueryUI draggable - move dragged element in the dom

I've got some issues with Javascript (Jquery + JqueryUI)..
I want to drag and drop an element. If it's over an other certain element the element is recreated..
Below I've tried to make a simplified example so you can see what i mean..
How can i move the code of a dragged element properly to a new position in the dom? This should happen on a "over" event. Not when i drop it. When i'm "out" of the dropzone the action made before should be reverted. Means the element copied back to it's source, replacing the other new created element with the same id..
Thanks!
Pala
-Edit-:
I've made some changes in the code for better visualization. When I remove this Line:
ui.draggable.attr("id", ui.draggable.attr("id") + "_bkp");
The "out:" the Code gets in the out-Part.. Problem is, that i have to change that id because otherwise there will be 2 identical ids.
Can I somehow tell jquery, that's still the same element?
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<style>
.bigbox{ width: 150px; height: 150px; padding: 0.5em; margin: 10px; border:thin solid black;}
.box{ width: 100px; height: 100px; padding: 0.5em; margin: 10px 10px 10px 0; border:thin solid black;}
</style>
<script>
$(function() {
$("#draggable_1, #draggable-nonvalid").draggable();
$("#droppable").droppable({
over: function(event, ui) {
ui.draggable.attr("id", ui.draggable.attr("id") + "_bkp");
ui.draggable.appendTo($("#muell"));
$('#momo').append('<div id="draggable_1" class="box"><p>I am a new Elemento</p></div>');
},
accept: "#draggable_1",
out: function(event, ui) {
$.each($("#muell > div"), function() {
var idOfBackedupElement = $(this).attr("id");
var origId = $(this).attr("id").replace("_bpk", "");
$("#" + origId).replaceWith($("#" + idOfBackedupElement));
});
}
});
});
</script>
</head>
<div id="momo" style="border:thin solid blue;float:left;">
<div id="draggable_1" class="box" >
<p>
Drag me to my target
</p>
</div>
<div id="droppable" class="bigbox">
<p>
accept: '#draggable'
</p>
</div>
</div>
<div id="muell" style="border:thin solid red;float:left;"></div>
</html>

The drag doesn't work when it has a siblings img in IE

I'm trying to make a drag box with a sibling img and the 'move-obj' can be dragged.It runs correctly in other browser but IE(8,9,10). In IE, just while you hover the border can you drag the 'move-obj', but if you remove the tag 'img' it work correctly.I found that if I add a background-color to the 'move-obj',it will run correctly too, but it isn't what I want. Can somebody give me some advice?Here is the codepen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
position: relative;
width: 100%;
height: 100%;
background-color: #f0f0f0;
padding: 10%;
}
.wrap-inside{
position: relative;
width: 500px;
height: 500px;
border: 1px solid #ddd;
}
.move-obj{
cursor: move;
position: absolute;
width: 100px;
height: 100px;
border: 1px solid blue;
}
.bg{
width: 500px;
height: 500px;
position: absolute;
}
</style>
</head>
<body>
<div class="wrap">
<img class="bg" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTE2qkLv64zdI4z5uIbE1oSMmI0AiQcbwbhAYAyI0cF2Dwg88tb" alt="">
<div class="wrap-inside">
<div class="move-obj"></div>
</div>
</div>
</body>
</html>
If I understand you correctly if and only if you are hovering over the mov-obj div you want to be able to move around the https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTE2qkLv64zdI4z5uIbE1oSMmI0AiQcbwbhAYAyI0cF2Dwg88tb image, right?
If this is what you want, look into either using jQuery and selecting the div on a hover event
$(.mov-obj).hover(function(event) {
//change the x and y coordinates of the image dynamically here of the image
//you can use the event.pageX and event.pageY (I think) to get how much/many pixels have been moved since the hover happened
}
or you can use pure JavaScript
document.getElementsByClassName("mov-obj").addEventListener("mouseenter", function( event ) {
//do something to change the img position dynamically
}, false);
//also do it for the mouseleave event
document.getElementsByClassName("mov-obj").addEventListener("mouseleave", function( event ) {
//do something to change the img position dynamically
}, false);
maybe set a flag letting you know that the mouseenter has happened, but not the mouseleave event
and then if and only if the mouse is inside the div add a click event to the div
while the click is pressed and the mouseleave event hasn't been triggered dynamically relocate the image depending on how much the mouse pointer has moved
(you can add a click event like this fyi)
document.getElementsByClassName("mov-obj").addEventListener("click", function( event ) {
//do something to change the img position dynamically
}, false);
or with jQuery
$(.mov-obj).click(function(event) {
//do something
}
hope this helps
Edit, just paste this code into a browser and try it out:
Note: this only works if you don't move the mouse outside of the div's width and height that you are wanting to move. I'll let you figure out how to fix that part if the mouse goes outside the div what happens
<DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
#div1 {
border: 2px orange solid;
width: 500px;
height: 500px;
}
#div2 {
border: 2px purple solid;
width: 250px;
height: 250px;
position: absolute;
}
</style>
<div id="div1">
<div id="div2">
</div>
</div>
<script type="text/javascript">
// add event listeners to div
var div2 = document.getElementById("div2");
div2.addEventListener("mousedown", getOriginalPosition, false);
div2.addEventListener("mouseup", changeLocation, false);
var helperX;
var helperY;
function getOriginalPosition(event) {
//use these to help with the calculation later
helperX = event.offsetX;
helperY = event.offsetY;
}
var end_xPosition;
var end_yPosition;
function changeLocation(event) {
end_xPosition = event.pageX;
end_yPosition = event.pageY;
div2.style.left = end_xPosition - helperX;
div2.style.top = end_yPosition - helperY;
}
</script>
</body>
</html>

Categories