I'm trying to drag an object (a simple image) onto the canvas from the toolbox. But once I move/ drag the object I dropped on the canvas it seems to create another clone of itself. But what I need is to simply be able to drop the object onto the canvas multiple times and have the possibility to move the object within the canvas without creating replicates of that object every time I drag it within the canvas. Here's my code:
<!doctype html>
<html>
<head>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script>
<!--script src="../dist/js/jsPlumb-2.1.1-min.js"></script-->
<style>
.ctoolbox{
position: absolute;
width: 72px;
height: 80px;
background-color: #0d78bc;
background-image: url("../dist/img/bigdot.png");
border: solid 3px red;
}
#dropArea{
cursor: pointer;
border: solid 1px gray;
width: 800px;
margin-left: 80px;
height: 400px;
position: relative;
overflow-x: scroll;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="ctoolbox" id="cId">
</div>
<div id="dropArea"></div>
<script>
//Drag and drop works for multiple objects but manipulating those objects within the canvas doesn't.
//Objects in the canvas are stagnant.
jsPlumb.ready(function(e)
{
jsPlumb.setContainer($('#dropArea'));
$(".ctoolbox").draggable
({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
$("#dropArea").droppable
({
accept : '.ctoolbox',
containment : 'dropArea',
drop : function (e, ui) {
droppedElement = ui.helper.clone();
$(droppedElement).draggable({containment: "dropArea"}); //Replicates everytime an object on the canvas is dragged.
droppedElement.appendTo('#dropArea');
droppedElement.click(divClicked);
}
});
function divClicked(clickedElement)
{
jsPlumb.draggable(clickedElement, {
containment : 'parent',
stop : function (event)
{
alert("divClicked Called!");
stateDragged=true;
clickedElement.css('background-color ','blue');
}
});
}
});
</script>
</body>
</html>
I've solved it and here's the final code. I had to remove the helper since jsPlumb doesn't support jQuery. And also add a class to the dropped element which provides the same style but stays safe from inheriting the same functionality as the ctoolbox element.
<!doctype html>
<html>
<head>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script>
<style>
.ctoolbox{
position: absolute;
width: 72px;
height: 80px;
background-image: url("../dist/img/bigdot.png");
border: solid 3px red;
}
#dropArea{
cursor: pointer;
border: solid 1px gray;
width: 800px;
margin-left: 80px;
height: 400px;
position: relative;
overflow-x: scroll;
overflow-y: scroll;
}
.ch{
position:absolute;
cursor:pointer;
width: 72px;
height: 80px;
background-image: url("../dist/img/bigdot.png");
}
</style>
</head>
<body>
<div class="ctoolbox" id="cId">
</div>
<div id="dropArea"></div>
<script>
jsPlumb.ready(function(e)
{
jsPlumb.setContainer($('#dropArea'));
$(".ctoolbox").draggable ({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
$("#dropArea").droppable ({
accept : '.ctoolbox',
containment : 'dropArea',
drop : function (e, ui) {
droppedElement = ui.helper.clone();
ui.helper.remove();
$(droppedElement).removeAttr("class");
jsPlumb.repaint(ui.helper);
$(droppedElement).addClass("ch");
$(droppedElement).draggable({containment:
"dropArea"});
droppedElement.appendTo('#dropArea');
}
});
});
</script>
</body>
</html>
Related
I've been searching a lot on the site and the web but can't really seem to find any help. My problem is that I need to make a function that creates a new div box on the press of a button and that div box needs to be draggable and editable.
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$newbox.draggable();
}
}
function deleteNote() {
$(this).parent('#newbox').remove();
}
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#canvas').click(function (e) {
makeNote(e);
});
// Remove the note
$("#close").click(function () {
deleteNote();
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
#newbox {
position: absolute;
background-color: white;
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px #888;
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 200px;
height: 180px;
border: 0;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" scr="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
</div>
</body>
</html>
draggable is a part of jquery-ui library. Not jquery.
Add <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> to your code.
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$newbox.draggable();
}
}
function deleteNote() {
$(this).parent('#newbox').remove();
}
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#canvas').click(function (e) {
makeNote(e);
});
// Remove the note
$("#close").click(function () {
deleteNote();
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
#newbox {
position: absolute;
background-color: white;
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px #888;
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 200px;
height: 180px;
border: 0;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
</div>
</body>
</html>
Since you use jQuery, you can use .draggable() from jQuery UI along with contenteditable="true":
function addNew() {
var field = $('<div contenteditable="true">Text</div>')
field.appendTo('#fields').draggable();
}
#fields div {
border: 1px dashed #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button onClick="addNew()">Add new field</button>
<hr/>
<div id="fields"></div>
There is something I want to notice.
never use same id to elements.
use jquery .on function for element that make by scripts.
never use box-shadow :D
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox'+e.pageX+e.pageY+'"><span class="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$($newbox).css({
'top' : ($('#canvas').height() / 2 - 150 + sequentCounter++) + 'px' ,
'left' : ($('#canvas').width() / 2 - 100 + rowSeqCounter + sequentCounter++) + 'px'
});
$newbox.draggable({cancel : '.close'});
}
}
var sequentCounter = 1;
var rowSeqCounter = 1;
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#div_element_maker').click(function (e) {
if (sequentCounter > 70){
sequentCounter = 1;
rowSeqCounter += 11;
if (rowSeqCounter > 50)
rowSeqCounter = 1;
}
makeNote(e);
});
// Remove the note
$('#canvas').on('click',".close", function () {
$(this).parent().remove()
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
.ui-widget-content {
position: absolute;
background-color: white;
height: 180px;
width: 185px;
border: 1px solid darkgray;
/*box-shadow: 10px 10px 10px #888;*/
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 180px;
height: 100px;
border: 1px solid darkgray;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
.close{
cursor: pointer;
background: red;
}
#div_element_maker{
cursor: pointer;
background: green;
padding: 10px;
margin: 10px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" scr="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
<span id="div_element_maker">make element</span>
</div>
</body>
</html>
I have a div
<div id="preview">
</div>
Is there any way to bind a click event to this div's left border?
Thanks in advance.
div {
height:100px;
border:4px solid black;
padding:10px;
}
Please try this method
$('div').click(function(e){
if( e.offsetX < 5){
alert('clicked on the left border!');
}
});
Edit - Better version
$('div').click(function(e){
if( e.offsetX <= parseInt($(this).css('borderLeftWidth'))){
alert('clicked on the left border!');
}
});
You have have events only on elements. Borders are not elements. But you can make it look like elements by using pseudo elements.
$(document).ready(function () {
$(".border:before").click(function () {
alert("Hi");
});
});
.border {border-left: 5px solid #99f; padding-left: 10px; position: relative;}
.border:before {content: " "; display: block; height: 5px; width: 5px; position: absolute; left: -5px; top: 0; background: #f00; height: 1em;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="border">Hi</div>
Or you can go with having a parent element surrounded.
$(function () {
$(".outer").click(function () {
alert("Hi");
});
$(".inner").click(function () {
return false;
});
});
.outer {background: #f00; padding-left: 5px;}
.inner {background: #fff; padding: 5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="outer"><div class="inner">Hi</div></div>
If you feel you should not add borders manually, already you will be adding the events with JavaScript. You can create an element on the fly and make it clickable.
$(function () {
$(".border").wrap("<div class='outer' />");
$(".outer").click(function () {
alert("Hi");
});
});
.border {border-left: 5px solid #f00; padding: 5px;}
.outer {padding-left: 5px; background: #f00;}
.outer .border {background: #fff; border: 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="border">Hi</div>
Or the best way is to use the computed value and events.
$(document).ready(function () {
$(".border").click(function (e) {
if (e.offsetX < parseInt($(this).css("border-left-width").replace("px", "")))
alert("Hi");
});
});
.border {border-left: 5px solid #99f; padding-left: 10px; position: relative;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="border">Hi</div>
I don't think there is but you can make your own border with another div and set a click event on that!
Here is a example:
HTML
<div id="preview">
<div id="leftborder"></div>
</div>
CSS
#preview{
width:200px;
height:200px;
background-color:black;
border: 5px solid blue;
border-left:0px;
}
#leftborder{
width:5px;
height:100%;
background-color: blue;
}
JS
$( "#leftborder" ).click(function() {
alert( "Left border clicked!" );
});
the JS part is jquery so you gonna need to include that in your header first.
Borders are not elements, and as such you cannot bind click event to it.If you wanted this type of functionality, you would need to place an element at the left edge of the div, and bind to that.
here is an simple example
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.preview {
background-color:#F5F5F5;
width: 50%;
height: 200px;
padding:10px;
border: 10px solid #FF0000;
}
</style>
</head>
<body>
<div id="el" class="preview"></div>
<!-- Script at the end -->
<script type="text/javascript" >
$('#el').click(function(e) {
var $this = $(this);
// Define the border with
var border_width = 10;
// Get the offset
var offset = $this.offset();
offset.left = e.pageX - offset.left;
offset.top = e.pageY - offset.top;
// Size can be used for calculate click on right border
var size = {
'width' : $this.width()
,'height' : $this.height()
};
if(offset.left <= border_width) {
console.info("border left clicked");
}
});
</script>
</body>
</html>
I am trying to make one div droppable and resizable, it works great in Chrome, but not in Firefox.
Here is my jsFiddle please open this in the Firefox:
MY DEMO
My code:
// main drop function for work area
$('#img-drop-container').droppable({
accept: '.img-drop',
drop: function(event, ui) {
var $clone = ui.helper.clone();
if (!$clone.is('.inside-drop-zone')) {
$(this).append($clone.addClass('inside-drop-zone').draggable({
containment: '#img-drop-container',
stack: '.inside-drop-zone',
zIndex: 100,
cursor: 'pointer'
}));
$clone.removeClass('img-drop');
// resize image
// $('.inside-drop-zone').resizable({
// aspectRatio: true,
// handles: 'ne, se, sw, nw'
// });
}
}
});
//clone the draggable items
$('li .img-drop').draggable({
helper: 'clone',
cursor: 'pointer',
});
ul {
list-style:none;
}
#img-drop-container {
background-color:#d8d8d8;
border: 1px solid #9C9898;
height:557px;
width:99.9%;
}
.img-drop {
height: 120px;
width: auto;
}
#trash {
float:left;
margin-left:20px;
margin-top:20px;
}
#trash {
width:140px;
height:140px;
background-repeat: no-repeat;
background-position:center center;
z-index:2;
}
img {
width:auto;
height:auto;
}
.store-thumb {
height: 50px;
width: 50px;
}
#imgbg {
float: right;
left: -2%;
position: relative;
top: 4%;
}
.column {
margin-top: -21%;
margin-left:55%;
}
.resizable {
width: 100px;
border: 1px solid #bb0000;
}
.resizable img {
width: 100%;
}
.ui-resizable-handle {
background: #f5dc58;
border: 1px solid #FFF;
width: 9px;
height: 9px;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<ul id="carousel" class="elastislide-list">
<li>
<div class="img-drop">
<div style='resize: horizontal; height:20px; width: 100px; overflow: auto; border: solid gray 1px;float:left; background-color: green;'></div>
</div>
</li>
</ul>
<div id="img-drop-container"></div>
Fiddle: http://jsfiddle.net/c38WX/40/
HTML:
only one div in li
<div class="img-drop" style='height:20px; width: 100px; overflow: hidden; border: solid gray 1px;float:left; background-color: green;'></div>
JQ:
add resizible widget
$('li .img-drop').draggable({
helper: 'clone',
cursor: 'pointer',
}).resizable({
handles: "e" ,
autoHide: true
});
Here's a working Fiddle, perhaps not perfectly as I'm not exactly sure what the functionality should be.
JSFiddle
Instead of using resize:horizontal, I'm using jQuery UI's resize (as it looks like you also tried) to hande the resize functionality. handles: 'e, w' is what restricts the resize to horizontal only.
// resize image
$('.resize_box').resizable({
handles: 'e, w'
});
I have this Code in which there is only Two static div, So i want your kind help to generate new div automatically when new user come. Actually i am working with SignalR.
i need a more divs for new users, and each user have his own div. please provide any of CS or Jquery code help to solve it out. Thanks FOR your help :)
My index. Html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body, html {
margin: 0px;
padding: 0px;
}
#indicator {
width: 300px;
height: 20px;
background: lightgrey;
color: black;
position: absolute;
left: 500px;
top: 0px;
}
#myshape {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
z-index: 100;
}
#yourshape {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
z-index: 1;
}
</style>
</head>
<body>
<script src="Scripts/jquery-1.6.4.js"></script>
<script src="Scripts/jquery-ui-1.10.3.js"></script>
<script src="Scripts/jquery.signalR-2.0.0.js"></script>
<script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
$.connection.hub.start().done(function () {
$("#indicator").html("connected");
$("#myshape").draggable({
drag: function () {
var left = $("#myshape").offset().left;
var top = $("#myshape").offset().top;
$.connection.moveShapeHub.server.calculate(left, top);
}
});
});
$.connection.moveShapeHub.client.updateshape = function (left, top) {
$("#yourshape").offset({ "left": left, "top": top });
};
});
</script>
<div id="myshape"></div>
<div id="yourshape"></div>
<div id="indicator"></div>
</body>
</html>
Look at the jquery docs on using the append method. That sounds like all you need. http://api.jquery.com/append/
My Code :.....
<html>
<head>
<script>
function demo()
{
var win=window.open("demo.html",'_blank');
alert('Requested Page Loaded...');
win.focus();
}
</script>
</head>
<body>
<input type="button" value="demo" onClick="demo()"></input>
</body>
</html>
I want to close the alert event dynamically using JavaScript event.
When alert is come in seen and it will close automatically using JavaScript event fire and close it..
You could create a pseudo-alert.
You can make it a modal if it is closed by a programmed event (instead of screen-triggered).
HERE is a fiddle. (click on two colors to open and close alert.
HTML
<div class='testdiv'></div>
<div class='testdiv3'></div>
<div id='dialogtest' class='testdiv2'>Alert!</div>
CSS
.testdiv {
width: 100px;
height: 100px;
margin: 0px auto;
background-color: red;
}
.testdiv3 {
width: 100px;
height: 100px;
margin: 0px auto;
background-color: green;
}
.testdiv2 {
background-color: green;
width: 50px;
height: 50px;
font-size: 15px;
}
.ui-dialog-titlebar {
display: none;
}
JS
$( ".testdiv2" ).dialog({
autoOpen: false,
modal: false,
height: 50,
width: 'auto',
position: { my: "right middle",
at: "left middle",
of : ".testdiv" }
});
$('.testdiv').click(function(){
$('.testdiv2').dialog('open');
});
$('.testdiv3').click(function(){
$('.testdiv2').dialog('close');
});