how to add draggable "add image" icon in jquery - javascript

I am curious to know how to add add image icon using jquery as in stack overflow. When user clicks it, it increases its size and goes wherever user places it.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 50px; height: 50px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<image src="/addImage" />
</div>
</body>
</html>
Here I have added simple image on which user should able to place where he wants to place image. I don't know how to increase the size of that div after dragging. Also I want to get the position where user have added it.
I also want it should ask to browse on pc to upload a image

This code will increase the size of the draggable after it is been dragged and will return the position (as offset) of the draggable-element:
$(function () {
$("#draggable").draggable({
stop: function( event, ui ) {
ui.helper.css({
width: '200px',
height: '200px'
});
$('#position').text('Top: ' + ui.position.top + ' Left: ' + ui.position.left)
}
});
});
Demo
Reference
.draggable()

Related

Element created on keydown using JavaScript createElement() method won't work with the jQuery draggable() method

I'm working on a drag and drop project where items can be added to a work area and dragged to be positioned. I am trying to use a key code to create multiple of the same kind of element, all of which can be dragged. The jQuery function works as long as the draggable element is created when the page loads, but if it's created using a function, the draggable() method isn't working on it. Is there a way to get the function to recognize the element created with a function?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Draggable Div Test</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.test {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="area" style="border: 1px solid black; width: 500px; height: 500px;"> </div>
<script>
var area = document.getElementById("area");
function duplicate(e) {
switch(e.keyCode) {
case 49:
var test = document.createElement("div");
test.classList.add("test");
test.classList.add("draggable");
console.log(test.classList)
test.style.backgroundColor = "blue";
area.appendChild(test);
break
}
}
document.addEventListener("keydown", duplicate)
$( function() {
$( ".test" ).draggable();
} );
</script>
</body>
</html>
Thanks
jQuery draggable has a function called clone:
$(function() {
i = 0
$("#draggable").draggable({
helper: 'clone',
appendTo: "#droppable",
});
$("#droppable").droppable({
accept: "#draggable",
});
i++;
var $obj = ui.helper.clone().attr( 'data-name', 'newelementdropped' +i).draggable({
stop : function (event, ui) {
YOUR CODE
});
}
See this answer: Jquery draggable(), clone() to append div...Pls Fiddle my jsfiddle
Just re-initalize the plugin after you insert the element.
Something like:
$(".test").draggable("destroy").draggable();

How to make a div draggable on another div?

I need to make a div dragable over the another div . How to do this ?
This is my html and i made this responsive using media query
<style>
.text-canvas{
z-index:1;
position:absolute;
}
.imageupload{
z-index:-1;
}
</style>
<script>
function submit_button(){
alert('hiii');
}
</script>
<div class="parent-canvas">
<div class="text-canvas" contenteditable="true">
my text
</div>
<div class="image-canvas">
<div class="imageupload" onclick="submit_button()">
<img src="img.png">
</div>
</div>
</div>
Here i need to make this text-canvas div dragabble, so that user can drag that my text and he can place it on any where in the image (only inside image-canvas div ).
I see the html drag and drop , but i didn't understand how to apply this .
Based on your html : Add this script
$( ".text-canvas"").draggable({
containment: ".imageupload"
});
For any doubts in syntax or working check these documents
(1) http://api.jqueryui.com/draggable/
(2) https://jqueryui.com/draggable/
Make sure you already included jquery-ui.js . First you need to call jquery.js or jquery.min.js then only call jquery-ui.js , the order is important.
eg:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Check Out HTML5 Drag And Drop
HTML5 Drag & Drop
Create targets for draggable elements.Enable any DOM element to be droppable, a target for draggable elements.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#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; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
} );
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>
The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which draggables each will accept.
Theming
The droppable widget uses the jQuery UI CSS framework to style its look and feel. If droppable specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes option:
ui-droppable: The droppable element. When a draggable that can be dropped on this dropppable is activated, the ui-droppable-active class is added. When dragging a draggable over this droppable, the ui-droppable-hover class is added.
link https://jqueryui.com/droppable/
See the Draggable example from jQuery UI here

Open tinymce editor upon clicking icon

Upon loading the page, I wish the tinyMCE editor to be closed. Upon clicking an element (and not the text, thus I don't think I should use inline mode), I wish to open it. I've found a couple ways of doing so. Is there a "right" way, and if so, what is it?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="//tinymce.cachefly.net/4.0/tinymce.min.js" type="text/javascript"></script>
<style type="text/css">
#content {height:200px;width:400px;border: 1px solid;}
</style>
<script type="text/javascript">
$(function(){
// Don't want this as I want to edit upon clicking "edit" and not inline
tinymce.init({
selector: '#content',
width : 400,
height: 200,
inline: true,
});
// Don't like this as I think it is ineffient, and the screen flickers
$('#edit').click(function(){
tinymce.init({
selector: '#content',
width : 400,
height: 200
});
});
// Is this how I should do it?
tinymce.init({
selector: '#content',
width : 400,
height: 200,
setup : function(ed) {
ed.on('init', function(e) {
e.target.hide();
});
}
});
$('#edit').click(function(){
//BOth seem to work. What is the right way?
//tinymce.editors['content'].show();
tinymce.get('content').show();
});
});
</script>
</head>
<body>
<div id="content">Initial content goes here</div>
<button id="edit">Edit</button>
</body>
</html>

Resizable split screen divs using jquery UI

I have a design in mind that involves a split panel view in html, similar to a winforms split panel. I've been expirimenting with jQuery UI - Resizable and I like the function, I just can't seem to co-ordinate the resizing of the two divs. The problem with the current code is that the two divs resize away from each other, not with one following the other. How can I make the two divs work together?
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.10.custom.css" media="screen">
<script type="text/javascript" src="script/jquery-1.5.1.js"></script>
<script type="text/javascript" src="script/superfish.js"></script>
<script type="text/javascript" src="script/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript">
// initialise plugins
$(function(){
try {
$('ul.sf-menu').superfish();
//set up divs
$('#Content').resizable({ handles: 'e', alsoResize: $('#Attributes')});
}catch(ex){
alert(ex.message);
}
});
</script>
</head>
<body>
<div id="Header">
<div id="Menu">
<ul class="sf-menu" id="nav">
<!-- Snip menu -->
</ul>
</div>
</div>
<div id="Middle">
<div id="Content" class="ui-widget-content">This is where the view is.<br/>
Imagine an image here ...
<br/>
<br/>
<br/>
</div>
<div id="Attributes" class="ui-widget-content">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</div>
<div id="FootBreak"/>
<div id="Footer">
Help
</div>
</body>
</html>
I have worked out a reasonable hack, using the resize event.
<script type="text/javascript">
var WIDTH_ATTR = 'initWidth';
// initialise plugins
$(function(){
try {
$('#Content').resizable({ handles: 'e', resize: resizeAttr });
$('#Content').attr(WIDTH_ATTR, $('#Content').width());
$('#InfoPanel').attr(WIDTH_ATTR, $('#InfoPanel').width());
}catch(ex){
alert(ex.message);
}
});
function resizeAttr(event, ui){
var change = ui.size.width - $('#Content').attr(WIDTH_ATTR);
$('#InfoPanel').width($('#InfoPanel').attr(WIDTH_ATTR) - change);
};
</script>
I'm still open to cleaner answers from others...
I am not sure if this meets the requirements, but ExtJS handles split panes with ease and works cross-browser. For example, see this RSS feed client in ExtJS. Be aware the ExtJS has commercial licensing restrictions if your intent is to sell your product.
Here is an example with a horizontal split (one top div, one bottom div), maybe slightly more minimalistic:
HTML:
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="div1">1st</div>
<div id="div2">2nd</div>
</body>
</html>
CSS:
#div1, #div2 {
position: absolute;
left: 0;
right: 0;
outline: solid 1px #ccc; /* just for making the divs visible */
margin: 5px; /* just for making the divs visible */
}
#div1 {
height: 100px;
top: 0;
}
#div2 {
top: 110px;
bottom: 0;
}
JavaScript:
$('#div1').resizable({
handles: 's',
resize: resizeEventHandler
});
function resizeEventHandler(event, ui){
var new_height = ui.size.height;
$('#div2').css('top', new_height + 10);
}
See demo here.

How can I get a css position change to take effect during a JQuery UI Draggable element's start event handler?

I have an odd situation in which I need to modify the position of a draggable element as soon as the user starts dragging it. So, during the draggable element's start event handler, I'm trying to set the position. It doesn't respond to the position change unless - and this is weird - I do something to cause a javascript error after I change the position. Here's an example:
<html>
<head>
<title>Drag reposition test</title>
<script type="text/javascript" src="js/css_browser_selector.js"></script>
<script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery-ui-1.7.1.custom.js"></script> <!-- Includes JQuery UI Draggable. -->
<style type="text/css">
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script type="text/javascript">
$(function() {
$("#initialdragger").draggable({
start: function(e, ui) {
$('#initialdragger').css('top', 400);
x = y; // Javascript error, which weirdly causes a redraw.
}
});
});
</script>
</head>
<body>
<div id="initialdragger" class="ui-widget-content" style="border-width: 1px; border-color: black; background-color: orange; width: 300px">
<p>Drag me around</p>
</div>
</body>
</html>
How can I legitimately cause a redraw to happen in this context? JQuery's hide() and show() don't work and neither do these methods.
I think binding a mousedown event will get you what you want
<script type="text/javascript">
$(function() {
$("#initialdragger").draggable();
$('#initialdragger').bind("mousedown", function(e) {
$(this).css('top', 400);
});
});
</script>

Categories

Resources