Drag and dropping images between panels - javascript

I am trying to create two panels using jQuery UI layout plugin, and then being able to drag & drop images between the two panels, on the right, the dropped image should maintain the position where it was dropped (and be able to drag it and keep the position anywhere on that right panel), then when drag & dropping from right to left panel the image should align like the originals.
This is the code im working on https://jsfiddle.net/Lwbka9ww/4/:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Layout Container</title>
<link type="text/css" rel="stylesheet" href="external/layout/layout-default.css" />
<style type="text/css">
html, body {
background: #666;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: auto; /* when page gets too small */
}
#container {
background: #999;
height: 100%;
margin: 0 auto;
width: 100%;
max-width: 1200px;
min-width: 700px;
_width: 700px; /* min-width for IE6 */
}
.pane {
display: none; /* will appear when layout inits */
}
</style>
<script type="text/javascript" src="external/jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="external/layout/jquery.layout.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#container').layout({
west: { size: "20%" }
});
var $left = $( ".ui-layout-west" ), $right = $( ".ui-layout-center" );
$( ".ui-layout-west .drag" ).draggable({
cancel: "a.ui-icon",
revert: "invalid",
containment: "#container",
cursor: "move",
helper: function () { return $(this).clone().appendTo('body').css('zIndex',5).show(); }
});
$right.droppable({
accept: ".ui-layout-west .drag",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
$(".accept").append(ui.draggable);
$(ui.draggable).css("position", "absolute");
}
});
/*$( ".ui-layout-center .drag" ).draggable({
cancel: "a.ui-icon",
revert: "invalid",
containment: "#container",
cursor: "move",
helper: function () { return $(this).clone().appendTo('body').css('zIndex',5).show(); }
});
//$( "li", $('.ui-layout-center') ).draggable();
function imageDropped( $item ) {
$item.fadeOut('fast', function() {
var $list = $( "ul", $right ).length ? $( "ul", $right ) : $( "<ul class='gallery ui-helper-reset'/>" ).appendTo($right);
$item.appendTo( $list ).fadeIn('fast');
});
}*/
});
</script>
<style>
.drag {
cursor: move;
clear: both;
padding-top: 10px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div id="container">
<div class="pane ui-layout-center">
<div class="accept"></div>
</div>
<div class="pane ui-layout-west">
<div class="drag">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLEBYPEhAQDRsNFQ8WIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6IyszODM4NzQtLisBCgoKDQwOFw8PGjclHyQ3ODcsLDc3LDcsLCw0LCwrNywsKywuKywrLDcrNysrKysrKysrKyssLCsrKyssKysrK//AABEIADwAPAMBIgACEQEDEQH/xAAaAAADAQEBAQAAAAAAAAAAAAADBAUGAgEH/8QAMxAAAQMDAgMGBAUFAAAAAAAAAQIDEQAEIQUSEzFBBiJRYXGBIzKxwRVSkaHwFGJjcvH/xAAZAQACAwEAAAAAAAAAAAAAAAABAgADBQT/xAAgEQACAgICAgMAAAAAAAAAAAAAAQIRAxITMSFRBBRB/9oADAMBAAIRAxEAPwAbNmu82tqPDbRGIO5ccsz9PKm+K2ygIBMIH+0n8s0y4Qi3Q8pKdyjEyTCRzgx60mu4ZO5S1fERK0tgBRSfzEePj1EjrWzsombTY4y2pQClCJAx59aJwqlp1+2t7dKY4j3IpGAD6+Y/fnyrm37VW75RtYUkOQUzmByM/YUn3MSpWTil2VuDXnB8qaS6wptLocSEK5Enb/yhruWR8nf9Dj9aueaC8tgWOT6QEs15wfKnNOUxqFwi3bdDTrh2jeOR9Ote2iVPs8RSUpO5QgT0JH2qLNFukwvFJdoyq9Rc4oaQ+kW20N71Snu9dsT1nP6GmE6nplsw6tK0uXC0wn4Z7p6EgkTyEnMmoT3ZnWFMpS01cvKSDHdCJPgciPUUBvsj2lTBNskbgAd1wiE+OAryGKwH8uck2jtWFE3UX9lwuFLB3Ak4gT4n3NJLu30vpDM7k9E972qvd9ldUbuW3bhyYzySoDwEgn6QMZrxq0TbWPFVx27jjltTaWFDe3tBKiYHMkgZ6cq5oqN9llI0Wh6nqSrVFmli3ULgb1EthawkK2nmMZmEzyPnT+gMXurai5ZsOBtLLhDh4YKggKKSoePIGOWakaVrDyUtotbpTTSG7gRxSiVjKRBjOBHXNB0ztOdN7TtXC0lttx075UUwgnMnqPLl1q3kp0PS/C1qVi8zqNwyzdp4La4DqylW4YyB16043dIaTsbuwhIJwlwczkmtIdF0fXrGz1By0Qwu6PHWULO4nwJBznniDUDtXoDH4uo2ejKcZKEwWypKRjpBq7kpeBaPnuma7ePtpQLcKUmExvCYAxk1Yt7u6d+azSAf8gM+lYBu6uFOQxLqlEY2Tu9o9KrN37wILrYG0ZBBUE9P54VwZMPoQ27bjpg7EgjpumP2plK8d4EH0NYpGrrBG19iR/Yr251QRrD6DDrlsoYgBYBI9M1RxSQbNGtLSxC2woeaQr9opdzTdOeUC5YsqUORLY+tTW9bMgFrcD1BKp94pn8SbIG4lKsY2kn6UEpIljStPsS2ho2qNjY2pAnujnjPjJoS9I01yCpo4ECFKwP1rpL2+YX4D5TM0QboxtIpt5ew7tGUbZeBAdtuIgKkEEpJ9Rn6U0xauNugpCuGobY3/KPYU8lwnBAPtTLcqMEnBileQFE620ptq4U4E7t35hO30I+4ozukW7m5TXw1K6bRk9ckY9qeUIRIJn1rlszM+Jo7MOpPTpCG1DYp0Dr3yM+uOVMIsJIi4V495wrmm0ErQdxoavhqOzEJn3qW2Cgf9MW3Mvr2icSaZTs2jBV5wK4BK8qzQXEgEfzrUJR//9k=" />
</div>
<div class="drag">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKDplYgDLBnlw0jBK06LriNY4eTqQtsf25U5VV95zAJBB9EavVhQ" />
</div>
<div class="drag">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR-uqB0D8Xnjcao1kZ0W2P-uftmFxJlq6fTATe0YCJX3tdFaL8H" />
</div>
</div>
</div>
</body>
</html>
My main problem is keeping the initial position and maintaining drag changes on the left panel, I haven't worked on right to left drag & drop yet.

Related

How to stop jQuery UI slider from overflowing on the right?

I have jQuery UI Slider which goes a lot over from the right side.
How can I get it to stop at the same spot as it stops at the left?
JSFiddle
https://jsfiddle.net/gqb7z9tx/
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Slider - Default functionality</title>
</head>
<body>
<div class="slider-wrapper">
<div id="slider">
<div id="custom-handle" class="ui-slider-handle">
</div>
</div>
</div>
</body>
</html>
Jquery
$( function() {
var handle = $( "#custom-handle" );
$( "#slider" ).slider({
create: function() {
handle.text( $( this ).slider( "value" ) + " €" );
},
min: 1000,
max: 1000000,
step: 1000,
slide: function( event, ui ) {
handle.text( ui.value + " €");
}
});
} );
CSS
.slider-wrapper {
padding: 50px;
}
#custom-handle {
width: 5em;
height: 1.6em;
top: 50%;
margin-top: -0.8em;
text-align: center;
line-height: 1.6em;
}

jQuery 'drop' function is not being called, overridden by 'over' function

I am dragging the drag to container1 and container2.
When it is dropped, drag either turns dark purple if in container1 or dark orange if in container2.
When drag is passing through container1, it should turn green, and when it is passing through container2, it should turn yellow (essentially drag can change to 4 different colors).
This is what I have, this changes drag when it hovers over container1 and container2, but it does not change color when it is dropped.
It seems the over function, which handles the hovering, overrides whatever I define my drop function to be.
Does anyone know what is going on?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
width: 50px;
height: 50px;
background: #e9559a;
padding: 13px;
margin: 0 5px 5px 0;
}
.bdrag {
height: 100px;
width: 100px;
background: grey;
padding: 5px;
}
.dark-purple {
background: #8b0000;
}
.dark-orange {
background: #000080
}
.drop-green {
background: #38a53a;
}
.drop-yellow {
background: #fbff23;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<div class="shape-container">
<div id="origin-container" class="container">
<div id="dragbox" class="bdrag text-dark">
<p>Draggable Box</p>
</div>
</div>
<div id="dcontainer2" class="container">
<p>Can drop in here #1</p>
</div>
<div id="dcontainer1" class="container">
<p>Can drop in here #2</p>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(function() {
$("#drag-container").draggable({
revert: function(event, ui) {
$(this).data("uiDraggable").originalPosition = {
top: 0,
left: 0
};
return !event;
}
});
$("#dcontainer1").droppable({
accept: '#dragbox'
});
$("#dcontainer2").droppable({
accept: '#dragbox'
});
$( "#dcontainer2" ).droppable({
over: function() { $("#dragbox").addClass("drop-yellow").removeClass("drop-green"); },
<!-- THE FOLLOWING LINE DOES NOT RUN: --!>
drop: function() { $("#dragbox").addClass("drop-orange").removeClass("drop-purple").find("p"); }
});
$( "#dcontainer1" ).droppable({
over: function() { $("#dragbox").addClass("drop-green").removeClass("drop-yellow"); },
<!-- THE FOLLOWING LINE DOES NOT RUN: --!>
drop: function() { $("#dragbox").addClass("drop-purple").removeClass("drop-orange").find("p"); }
});
});
});
</script>
</body>
</html>

how to get class of a dragged item after been received by the target sortable?

$(".target").droppable({
connectWith: ".connected",
drop: function (event, ui) {
var targetId = event.target.id;//--> id of the target (where elements will be dropped into)
var orderId;//--> id of the dragged element (NOT the targetId)
if ($(this).hasClass("source connected")) {
orderId = sourceElementSo;
}
else {
orderId = $(ui.draggable).attr("id");
};
i've tried ui.item and ui.draggable, but no success
PS: Newbie :)
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
connectWith: ".connected",
drop: function( event, ui ) {
var targetId = event.target.id;//--> id of the target (where elements will be dropped into)
var orderId;//--> id of the dragged element (NOT the targetId)
if (ui.draggable.hasClass("connected")) {
console.log("ok");
orderId = sourceElementSo;
}
else {
orderId = $(ui.draggable).attr("id");
};
}
});
});
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content connected">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>

Jquery Drag and Drop to change div content

I have 2 draggable div's in a html document and I have 1 droppable div next to the 2 draggable one's.
When you drag one of the draggable div's onto the droppable div the droppable div shows some text and the draggable div reverts back to where is was.
My question is how can I change the text in the droppable div according to the which draggable div I have dropped onto the droppable div?
I hope this makes sense, below is my code.
Many thanks
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Revert draggable position</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<style>
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#draggable, #draggable1 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable1" ).draggable({ revert: "valid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>I revert when I'm dropped</p>
</div>
<div id="draggable1" class="ui-widget-content">
<p>I revert when I'm dropped</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop me here</p>
</div>
</body>
</html>
Using the example you provided, try this:
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable1" ).draggable({ revert: "valid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( ui.draggable[0].id );
}
});
});
DEMO:
http://jsfiddle.net/dirtyd77/SLGdE/23/
You can get the id of the draggable element (the dragged element) from the ui object like so:
drop: function( event, ui ) {
ui.draggable[0].id
}
Fiddle
Your full drop callback would look like this in your example:
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped! " + ui.draggable[0].id);
}

Drag/Drop event only works once on dynamically added divs

I'm using the drag and drop libraries found here: http://threedubmedia.com/code/event/drop/
But I can't seem to get it to work more than once for elements added dynamically.
I've made a jsfiddle to demonstrate the issue.
http://jsfiddle.net/Rn9gQ/
Here you can click the button to add new divs, and you can drag the mouse to select some of them, but you can't select again after finishing dragging the mouse. Even if you make no selection the first time.
Now sure where I'm going wrong, and any help would be greatly appreciated :)
*Edit: Added code below
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://threedubmedia.com/inc/js/jquery-1.7.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag.live-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop.live-2.2.js"></script>
<title>Testpage</title>
</head>
<body>
<script type="text/javascript">
jQuery(function($){
$('#foo').click(function(){
$('#main').append($('<div class="drop">foo</div>'))
});
$( document )
.drag("start",function( ev, dd ){
return $('<div class="selection" />')
.css('opacity', .65 )
.appendTo( document.body );
})
.drag(function( ev, dd ){
$( dd.proxy ).css({
top: Math.min( ev.pageY, dd.startY ),
left: Math.min( ev.pageX, dd.startX ),
height: Math.abs( ev.pageY - dd.startY ),
width: Math.abs( ev.pageX - dd.startX )
});
})
.drag("end",function( ev, dd ){
$( dd.proxy ).remove();
})
.on("dropstart", ".drop", function(){
$(this).addClass("active");
})
.on("drop", ".drop", function(){
$(this).toggleClass("dropped");
})
.on("dropend", ".drop", function(){
$(this).removeClass("active");
});
$.drop({ multi: true });
});
</script>
<h1>Live adding of selectable elements</h1>
<p>Click and drag to select any number of dashed boxes.</p>
<input type="button" id="foo" value="Add a box"/>
<div id="main"></div>
<style type="text/css">
.selection {
position: absolute;
border: 1px solid #89B;
background: #BCE;
background-color: #BEC;
border-color: #8B9;
}
.drop {
float: left;
border: 1px dashed #888;
background: #EEE;
text-align: center;
padding: 20px;
margin: 0 10px 10px 0;
}
.dropped {
background-color: #EBC;
border-color: #B89;
}
.active {
background-color: #CEB;
border-color: #9B8;
}
</style></body>
</html>

Categories

Resources