our problem :
I've got a draggable thing outside an iframe, and a droppable target inside it. Here I've shown the iframe as containing a snippet of the HTML that is loaded by its src attribute.
so see code :
inner iframe page (inner_iframe.html):
<body style="cursor: auto;">
<div id="container">
</div>
</body>
main page :
<div id="main">
<iframe id="containeriframe" src="inner_iframe.html"></iframe>
</div>
<div id="container1">
<div class="drag" style="left: 20px;" id="lable"></div>
</div>
JavaScript code :
$("#containeriframe").load(function () {
var $this = $(this);
var contents = $this.contents();
// here, catch the droppable div and create a droppable widget
contents.find('#container').droppable({
iframeFix: true,
drop: function (event, ui) { alert('dropped'); }
});
});
$( "#lable" ).draggable({
revert: "invalid",
helper: "clone",
cursor: "move",
iframeFix: true
});
now i use Jquery 1.8 and Jquery UI.
so i load page and try to drop in iframe div but no respond , so how to manage it.
please help me ....
Thanks
This works for me:
Main page:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js""></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script>
$(function () {
$("iframe").load(function () {
var iframe = $(this).contents();
iframe.find('#iframe_container').droppable(
{
drop: function (event, ui) { alert('dropped'); }
});
});
$('#drag').draggable();
});
</script>
</head>
<body>
<iframe src="iframe.html"></iframe>
<div style="width:20px; height:20px; background-color: #808080" id="drag"></div>
</body>
</html>
iframe:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="iframe_container" style=" width: 40px; height: 40px; background-color: #0094ff">
</div>
</body>
</html>
Try this plugin http://maxazan.github.io/jquery-ui-droppable-iframe/
<!--jquery -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<!--jquery UI -->
<script type="text/javascript" src="js/jquery-ui-1.11.4.custom.js"></script>
<!-- jquery-ui-droppable-iframe -->
<script type="text/javascript" src="jquery-ui-droppable-iframe.js"></script>
<!--Activate drag and drop zones -->
<script type="text/javascript">
$(function() {
//After frame loaded
$("#testframe").load(function() {
//Activate droppable zones
$(this).contents().find('.droppable').droppable({
drop: function(event, ui) {
//ACTION ON DROP HERE
}
});
});
//Activate draggable zones
$('.draggable').draggable({
iframeFix: true, //Core jquery ui params needs for fix iframe bug
iframeScroll: true //This param needs for activate iframeScroll
});
});
</script>
Related
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();
<!DOCTYPE html>
<html>
<head>
<title>songs list</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style type="text/css">
.droppable {
width: 300;
height: 900px;
background: lightgrey;
}
</style>
</head>
<body>
<div class="draggable">
<p><a href="C:\Users\DELL\Desktop\drag and drop\static\Allah Duhai Hai.mp3"><EM> barish</EM></p>
</div>
<div class="draggable">
<p><EM> Aa Bhi Ja Mere Mehermaan</EM></p>
</div>
<div class="draggable">
<p><EM>Aa Bhi Ja Sanam</EM></p>
</div>
<div class="draggable">
<p><EM>Allah Duhai Hai </EM></p>
</div>
<div class="droppable">
</div>
<script type="text/javascript">
$('.draggable').draggable({
revert: "invalid",
stack: ".draggable",
helper: 'clone'
});
$('.droppable').droppable({
accept: ".draggable",
drop: function (event, ui) {
var droppable = $(this);
var draggable = ui.draggable;
// Move draggable into droppable
draggable.clone().appendTo(droppable);
}
});
</script>
</body>
</html
#i have script for drag and drop drop audio files it works fine , but if i upload same audio once again into div it, goes again into that div, what i mean is i don't want to add that file if it is added once (i.e) drag and drop.
You could remove the class from the div after you complete the script using the .removeClass() method (https://api.jquery.com/removeclass/)
Something like this:
<script type="text/javascript">
$('.draggable').draggable({
revert: "invalid",
stack: ".draggable",
helper: 'clone'
});
$('.droppable').droppable({
accept: ".draggable",
drop: function (event, ui) {
var droppable = $(this);
var draggable = ui.draggable;
// Move draggable into droppable
draggable.clone().appendTo(droppable);
$(this).removeClass('droppable');
}
});
</script>
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>
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()
i want to have fading effect between 3 images with the help of slider in jquery.
fading is working fine but all the images are coming side by side instead of top of another.how can i achieve that?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/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.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#slider" ).slider({
range: "min",
value: 10,
min: 0,
max: 20,
slide: function (event, ui) {
var r = (ui.value);
$("#img1").css({'opacity':1-(r/10)});
$("#img2").css({'opacity':function(){
if((r-10)<0)
return r/10;
else
return 1-((r-10)/10);
}
});
$("#img3").css({'opacity':(r/10)-1});
}
})
});
</script>
</head>
<body>
<div style="position:relative">
<img id = "img1" src = "img/face_1.png" style = "height:1024px; width:768px;z-index:1">
<img id = "img2" src = "img/face_2.1.png" style = "height:1024px; width:768px;z-index:2">
<img id = "img3" src = "img/face_3.jpg" style = "height:1024px; width:768px;z-index:3">
<div id="slider" style = "height:10px; width:200px" ></div>
</div>
</body>
</html>
Here's an easier solution
JQuery
jQuery(document).ready(function(){
$(function(){
$('.fadein div:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut(1000)
.next('div').fadeIn(1000)
.end().appendTo('.fadein');},
2000);
});
});
HTML
<div class="fadein">
<div id="rotatingImage1"></div>
<div id="rotatingImage2"></div>
<div id="rotatingImage3"></div>
</div>
CSS
#rotatingImage1{background:url('http://lorempixel.com/500/501/') no-repeat;position:absolute;width:500px;height:500px;}
#rotatingImage2{background:url('http://lorempixel.com/500/502/') no-repeat;position:absolute;width:500px;height:500px;}
#rotatingImage3{background:url('http://lorempixel.com/500/503/') no-repeat;position:absolute;width:500px;height:500px;}