I am using jquery-UI for making drag and drop web UI , but I am facing some problems during implementation of this . I am sharing my code which is a prototype and simple example of my implementation .
In my example there have three div elements : drag me , drop here and make me draggable .
Now I explain what is that . Actually I want drag element and drop it in container but when I dropping it in container that is not placing where I want in first time that is first problem .That is coming when I set container position relative because I want top 0 left 0 .
Second problem with make me draggable div . Suppose I dropped multiple drag me div elements inside container and then save this (In this example have not save option) then goes to edit so these saved elements are not draggable right now but there have same class if you see in code . But I don't know how I make these draggable .
So I have two issues with jquery-UI please if anyone have any solution and have expertise on jquery-UI please help me .
See my code html :
.drag {
text-align: center;
margin-top:5px;
width: 100px;
height:100px;
color:white;
background-color: red;
margin-bottom: 5px;
border: 1px solid black;
}
.container {
text-align: center;
width: 400px;
margin-top:5px;
margin-left: 5%;
height: 400px;
color:white;
background-color: green;
border:1px solid black;
}
.dropped {
text-align: center;
width: 100px;
height:100px;
color:white;
background-color: red;
border: 1px solid black;
}
body {
display: flex;
}
<div class="drag">Drag me</div>
<div style="position:relative" class="container">drop here !!
<div class="dropped ui-draggable" style="position: absolute; left: 299px; top: 299px; z-index: 1000;">Make me draggable</div>
</div>
Jquery UI :
$(document).ready(function() {
$('.drag').draggable({
helper: "clone",
appendTo:"body",
revert: "invalid"
});
$('.container').droppable({
accept: ".drag",
drop: function(e, u) {
var a = u.helper.clone();
a.css("z-index", 1000);
a.appendTo(".container");
console.log("INFO: Accepted: ", a.attr("class"));
a.attr('class', 'dropped').draggable({
containment: ".container"
});
}
});
});
Related
I have a small problem. I pasted my code here.
My problem is this: I want to make my window div (<div id="window"> Drag me </div>) draggable only within warp div.
HTML code:
<div id="warp">
<div id="window">
Drag me
</div>
</div>
CSS code:
body {
margin: 0;
background-color: #e67e22;
}
#window {
width: 150px;
height: 200px;
//background-color: #1abc9c;
border: 2px solid #16a085;
padding: 20px;
}
#warp {
margin: 10px;
width: 700px;
height: 600px;
border: 2px solid #e74c3c;
}
JS code:
$(document).ready(function() {
$("#window").draggable();
});
I mean when I drag it with mouse then it shouldn't go out of warp div.
you can use
$( "#window" ).draggable({
containment: 'parent'
});
$("#window").draggable ({
containment : "#warp"
});
I'm trying to to create a simple drag, drop and resize page using jquery.
So far everything works fine. But now I have faced a new challenge.
This is the current process:
1- user drags and drops an image (div) onto a parent DIV.
2- The user will be presented with a clone of the dragged and dropped image with handles so they can easily resize the image (div).
basically, what i need to do is to remove the handles (helper), on clickout and add them again if the user wants to resize the DIV and if they click inside the DIV again.
so i tried to use this code:
$("#droppable").find(".ui-resizable-handle").remove();
the code above will remove the handles only when a new image has been dragged and dropped onto the stage. also, it is not a good way of doing this becuase it will remove the handles completely and I cannot re-add them again.
This is my entire code:
<html>
<head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" >
google.load("jquery", "1.6.3");
google.load("jqueryui", "1.8.16");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script>
$(document).ready(function () {
var x = null;
//Make element draggable
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit'
});
$("#droppable").droppable({
drop: function (e, ui) {
if ($(ui.draggable)[0].id != "") {
x = ui.helper.clone();
ui.helper.remove();
$("#droppable").find(".ui-resizable-handle").remove();
x.draggable({
//helper: 'original',
containment: '#droppable',
tolerance: 'fit'
});
x.resizable({
animate: true,
//aspectRatio: 16 / 9,
helper: "ui-resizable-helper",
handles: "n, e, s, w, nw, ne, sw,se"
});
x.appendTo('#droppable');
}
}
});
});
</script>
<style type="text/css">
.col{
float:left;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}
#col1{
width:500px;
height:820px;
border:1px solid #CCC;
float:left;
}
.drag{
width:100px;
height:100px;
position:relative;
background-size:contain !important;
background-repeat:no-repeat;
float:left;
margin-left:10px;
margin-top:30px;
border:solid 1px #CCC;
}
.drag:hover{
opacity: 0.6;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
#droppable{
width:720px;
height :820px;
border:1px solid #CCC;
}
#droppable .drag{
width:200px;
height :220px;
background-size:200px;
border:none;
}
.new-class{
width:200px;
height :220px;
background-size:200px;
border:solid 4px #666;
}
.ui-resizable-handle {
width: 10px;
height: 10px;
background-color: #ffffff;
border: 1px solid #000000;
}
.ui-resizable-n{
top: -10px;
left:50%;
width: 6px;
height: 6px;
}
.ui-resizable-e
{
right:-10px;
top:50%;
width: 6px;
height: 6px;
}
.ui-resizable-s
{
bottom: -10px;
left: 50%;
width:6px;
height: 6px;
}
.ui-resizable-w
{
left:-10px;
top:50%;
width: 6px;
height: 6px;
}
.ui-resizable-nw
{
left: -10px;
top: -10px;
width: 6px;
height: 6px;
}
.ui-resizable-ne
{
top: -10px;
right: -10px;
width: 6px;
height: 6px;
}
.ui-resizable-sw
{
bottom: -10px;
left: -10px;
width: 6px;
height: 6px;
}
.ui-resizable-se
{
bottom: -10px;
right: -10px;
width: 6px;
height: 6px;
}
.ui-resizable-helper {
border: 1px dotted #CCC;
}
</style>
</head>
<body>
<div align="center" id="wrapper">
<div class="col" id ="droppable">
</div>
<div class = "col" id="col1">
<div id="drag1" class="drag" style="background-image:url(images/Chrysanthemum.jpg); background-position:center;"> </div>
<div id="drag2" class="drag" style="background-image:url(images/Hydrangeas.jpg); background-position:center;" ></div>
<div id="drag2" class="drag" style="background-image:url(images/3.jpg); background-position:center;"></div>
</div>
</div>
</body>
</html>
I do apologies for posting my entire code, I did try to create a working jsfidle and it seems like jsfidle doesn't like jquery.ui URL.
could someone please advise on this issue ?
If you want to detect a click falling outside of a particular element, you can do that by attaching a click handler to a top-level element (commonly document) and look at event.target.
To reinsert elements you've previously removed from the DOM you have to use .detach() instead of .remove(). However, a better way to get the same visual effect is to simply use hide and show which toggle the css property diplay:, since you don't have to care about where you need to reinsert the detached elements. It would look like:
$(document).click(function(e) {
// matches all children of droppable, change selector as needed
if( $(e.target).is("#droppable *") ) {
$(e.target).find(".ui-resizable-handle").show();
}
else {
$("#droppable").find(".ui-resizable-handle").hide();
}
});
I have a pretty simple site in which I want to be able to drag and drop some styled DIV elements between two DIV containers. I have used JQueryUI's sortable function to successfully implement the drag and drop behavior like so:
$("#active-container").sortable({connectWith: "#inactive-container"});
$("#inactive-container").sortable({connectWith: "#active-container"});
I add my droppable DIV elements to the containers on button click using this method:
function createDeviceDiv (deviceObject, className){
var div = document.createElement('div');
div.id = deviceObject.deviceId;
div.className = className + ' draggable="true"';
div.textContent = deviceObject.deviceName;
return div;
}
My CSS looks like this:
.active-device-element
{
width: 200px;
height: 40px;
border: 2px solid #666666;
margin: 10px;
background-color: lightgreen;
cursor: move;
border-radius: 25px;
text-align: center;
vertical-align: middle;
line-height: 35px;
-webkit-user-select: none;
}
.inactive-device-element
{
width: 200px;
height: 40px;
margin: 10px;
border: 2px solid #666666;
background-color: floralwhite;
cursor: move;
border-radius: 25px;
text-align: center;
vertical-align: middle;
line-height: 35px;
-webkit-user-select: none;
}
#active-container, #inactive-container
{
background-color: lightgrey;
min-height: 100px;
}
The relevant portion of my index.html page (using Twitter bootstrap 3) is as follows:
<div class="row">
<div class="col-xs-6">
<h2>Active Devices</h2>
<p>The following devices are currently listed as active.</p>
<div id="active-container">
</div>
</div>
<div class="col-xs-6">
<h2>Inactive Devices</h2>
<p>The following devices are currently listed as inactive.</p>
<div id="inactive-container">
</div>
</div>
</div>
So, dragging and dropping between the two containers works well. However, when dropped, the element retains the original style. I need to highlight changes that have been made by changing any element that has beeen drag dropped to a different background color/style, so based on my CSS, something like, '.modified-device-element'. I am unclear as to what the best way to accomplish this is.
Any help is greatly appreciated.
jQuery UI Sortable has several events you can use, one of them being receive. You can set up the event listener to get updates on both of the containers. Then, when items move from one to the other container you can get that item and modify it however you want, including adding another class.
$('#active-container, #inactive-container').on('sortreceive', function(event, ui) {
ui.item.addClass('modified-device-element');
});
or when setting up the widget
$('#active-container').sortable({
receive: function(event, ui) {
ui.item.addClass('modified-device-element');
}
});
$('#inactive-container').sortable({
receive: function(event, ui) {
ui.item.addClass('modified-device-element');
}
});
So when user hover over div(#cart-quick-view) child(.cart_details_box) needs to slideDown, and to slideUp when mouse gets out of parent(#cart-quick-view). Problem with this code is that sometimes I get 2-3 extra bouncing when mouse is in area of child(.cart_details_box).
Fiddle: http://jsfiddle.net/Y9QLC/
HTML:
<div id="cart-quick-view">
<ul class="nav navbar-nav navbar-right">
<li>...</li>
</ul>
<div class="cart_details_box"></div>
</div>
CSS:
#cart-quick-view {
float: right;
position: relative;
border: 1px solid black;
}
.cart_details_box {
display: none;
position: absolute;
height: 200px;
width: 205px;
background-color: #F8F8F8;
border-radius: 5px;
border:1px solid #E7E7E7;
padding: 0px 3px 3px 3px;
top: 55px;
right: 0;
}
JS:
$(function() {
$('#cart-quick-view').hover(function() {
$('.cart_details_box').slideToggle('slow');
});
});
It is because of the queuing of animations when the mouse enter and leave the parent element quickly. You can use .stop(true, true) to clear the existing animations to fix it
$(function () {
$('#cart-quick-view').hover(function () {
$('.cart_details_box').stop(true, true).slideToggle('slow');
});
});
Demo: Fiddle
The stop() method is an option, but there is also a jQuery plugin available called hoverFlow that can fix the problem with a better looking transition.
I am using the following sliding div script:
http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html
Currently, the slidetoggle function is activated when the .btn-slide button is clicked. This slides up the "panel" div.
Upon clicking the .btn-slide button a second time, the panel div is closed.
I am a complete newb at js, so any assistance would be appreciated. Here's what I am trying to do:
1) When the mouse moves over (as opposed to clicking) the .btn-slide class, i would like the panel to slide out.
2) Then, when the mouse moves out of either the .btn-slide or #panel, i would like the panel to close. (but if the mouse is over either one, the panel should stay open).
I was able to get it working to where the slidetoggle function would close either one, or the other, but not both.
Thank you in advance for the help.
Sincerely,
Mac
Here is the JS:
<script type="text/javascript">
jQuery(function($){
$(document).ready(function(){
$('.btn-slide').click(function() {
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
});
</script>
here is the HTML currently being used:
<div id="prod_nav_tab">
<div id="panel">
This is where stuff goes!
</div>
<p class="slide"><a class="btn-slide">Table of Contents</a></p>
</div>
I have played with the CSS to fit my particular web site and is as follows (the original js, html, css can be obtained from the link above).
div#prod_nav_tab {
width: 200px;
height: 31px;
overflow: hidden;
background-color:#F00;
float: left;
margin: 0px 0px 0px 75px;
}
a:focus {
outline: none;
}
#panel {
background-color:#F00;
width: 200px;
height: 200px;
display: none;
position: absolute;
bottom: 0px;
}
.slide {
margin: 0;
padding: 0;
/* border-top: solid 4px #422410; **Adds a line at top of slide button to distibuish it */
background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
background: #d8d8d8;
text-align: center;
width: 200px;
height: 31px;
padding: 0px 0px 0 0;
margin: 0 0 0 0;
display: block;
font: bold 12pt Arial, Helvetica, sans-serif;
color: #666;
text-decoration: none;
position: relative;
cursor: pointer;
/* background: url(images/white-arrow.gif) no-repeat right -50px; ** Controls Arrow up/down */
}
.active {
background-position: right 12px;
}
When you move away from the .btn-slide to the #panel it hides it now because it triggers the mouseleave event of the .btn-slide.
To prevent this you should do something like:
HTML:
<div id="trigger">
Slide down
<div id="panel">
Content of your panel
</div>
</div>
JQuery:
jQuery(function($) {
$(document).ready(function() {
$("#trigger").mouseenter(function() {
$("#panel").slideDown("slow");
$(this).addClass("active");
}).mouseleave(function() {
$("#panel").slideUp("slow");
$(this).removeClass("active");
});
});
});
Make sure in your CSS you then set the panel to be hidden from start...
div#panel {
display: none;
}