I have an image map defined as below
<img src="../../Content/Images/Mapimage.png" usemap="#Map" />
<map name="Map">
<area id="s1" shape="rect" coords="200,45,270,105"/>
<area id="s2" shape="rect" coords="215,275,280,335"/>
<area id="s3" shape="rect" coords="110,270,180,335"/>
</map>
and a draggable image
<img src="../../Content/Images/image1.png" id="draggableImage"/>
and the jquery
$("#draggableImage").draggable({
helper: 'clone',
appendTo: 'body',
});
$("#s1").droppable({
drop: function (event, ui) {
alert("Got it");
}
});
when I drag and drop nothing happens.
If I drag and drop to a div that I have set as droppable that is NOT in an image map it works. It is just not working when I drop on an image map area.
Any thoughts how to do this on an image map area?
Thanks!
Related
I want some piece of code to delete the element dropped on the red div.I need the code to do the following:
Create the clicked element on "Canvas" div.
let the user drag the element
finally let the user delete the element by dropping it to red div.
I hope I will get the best solution from here. here is the code:
function makeResizable(x)
{
x = $(x);
x.resizable();
}
function makeDraggable(x)
{
x = $(x);
x.draggable();
}
function createPredefine(){
$element = $(' <img src="img/5.jpg" alt="" height="45" width="110"
onDblClick="makeResizable(this)" />');
$("#canvas").append($element);
$element.draggable();
}
$(document).ready(function(e) {
$( "#deleting_div" ).droppable({
drop: function( event, ui ) {
$(this).children().remove();
alert("trigger");
}
});
});
Create
Components
    <img src="img/5.jpg" alt="" height="45" width="110"
onClick="createPredefine()"/>        <img
src="img/6.jpg" alt="" height="60" width="80" onClick="createCircle()"/>
<br /><br >
</div>
</td>
<td>
<div id="canvas" style="background-
color:#FFF;width:800px;height:700px;">
<div id="deleting_div" style="background-
color:red;widhth:50px;height:50px;"></div>
<h2>             
       
           
    Draw Here</h2></div>
</td>
</tr>
</table>
</BODY>
</HTML>
You can't place a within a canvas (see Placing a <div> within a <canvas>)
Canvas is like a painting, rather than a collection of Lego bricks - what you put on the canvas is flat and permanent. The DOM is more like the collection of Lego bricks; you can pick one up and move it (and everything attached to it will move).
The closest you could get to moving something with a painting would probably just smudge the paint :)
What would probably be the most effective approach for what you are trying to do is create a "virtual" painting/canvas that is built of DOM objects and then "draw" that onto your canvas (see https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas)
Here is my Html file
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="effects.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="effects.js"></script>
<main>
<h2>Rank our Customer Support products</h2>
<h3>Drag up or down to rank</h3>
<ul id="vsupport">
<li class="ui-state-default">Blog / How-To Articles</li>
<li class="ui-state-default">Discussion Forum</li>
<li class="ui-state-default">Knowledge Base</li>
<li class="ui-state-default">Phone Support</li>
<li class="ui-state-default">Wiki Support</li>
</ul>
<br>
<input type="submit" id="submitbutton" value="Submit ">
</main>
and the effects.js file
$(document).ready(function(){
$("#vsupport").sortable({
placeholder:"ui-state-highlight",
start:function(event,ui){
$(ui.item).effect("pulsate",{times:3},1500);
},
update:function(event,ui){
$(ui.item).effect("highlight",{color:"#7fffd4"},2000);
}
});
$("#submitbutton").button().on("click",function(){
$("#vsupport li").removeAttr("style");
});
});
My question is, when I drag the li element to sort it, the li element disappears, and through debug tool,Isaw some css style was added to the li element:
<li class="ui-state-default ui-sortable-handle" style="width: 313px; height: 18px; position: absolute; z-index: 1000;">Knowledge Base</li>
and if I remove this css style, the li element appears again.
Anyone knows why this happens and any solutions to it?
Any answer is appreciated, thanks!
It is because of how 'pulsate' operates. It will set the position of the dragged item as 'absolute' while pulsating. Thus, after the item is dropped, the next item will disappear underneath the dragged item. If you finish holding the item until pulsating is finished, then everything will operate as intended.
Therefore, let's fix the position after pulsating stops:
$(document).ready(function(){
$("#vsupport").sortable({
placeholder:"ui-state-highlight",
start:function(event,ui){
$(ui.item).effect("pulsate",{times:3},1500,function() {
$(this).css('position','initial'); //fixing the position
})
},
update:function(event,ui){
$(ui.item).effect("highlight",{color:"#7fffd4"},2000);
},
stop:function(event,ui){
}
});
$("#submitbutton").button().on("click",function(){
$("#vsupport li").removeAttr("style");
});
});
I'm developing a Phonegap IOS application . One of my pages contains an iframe. I have a textbox where user can type URL. The URL in textbox will set iframe source. User should be able to navigate within iframe. After that i have to save the URL in database.I have applied smartzoom jquery plugin to zoom iframe which is working fine. In safari links are working but in simulator links are not click-able. How can i make links in iframe clickable? here is jsfiddle link what i have done so far which is working fine in brwoser but not in simulator.
<div id="positionButtonDiv">
<p> <span>
<img id="btnzoomIn" class="zoomButton" src="http://e-smartdev.com/github/smartJQueryZoom/example/assets/zoomIn.png" height="34" width="34" title="zoom in" alt="zoom in" />
<img id="btnzoomOut" class="zoomButton" src="http://e-smartdev.com/github/smartJQueryZoom/example/assets/zoomOut.png" height="34" width="34" title="zoom out" alt="zoom out" />
</span>
</p>
<p> <span class="positionButtonSpan">
<map name="positionMap" class="positionMapClass">
<area id="btnUp" shape="rect" coords="20,0,40,20" title="move up" alt="move up" />
<area id="btnLeft" shape="rect" coords="0,20,20,40" title="move left" alt="move left" />
<area id="btnRight" shape="rect" coords="40,20,60,40" title="move right" alt="move right" />
<area id="btnDown" shape="rect" coords="20,40,40,60" title="move bottom" alt="move bottom" />
</map>
<img src="http://e-smartdev.com/github/smartJQueryZoom/example/assets/position.png" height="58" width="58" usemap="#positionMap">
</span>
</p>
</div>
<div id="viewsites" class="viewsites">
<iframe scrolling="no" id="viewsite_iframe" sandbox="allow-scripts allow-popups allow-forms" src="" class="clsIframe"></iframe>
</div>
jscode
$(document).ready(function () {
$('#btnUp,#btnLeft,#btnRight,#btnDown').bind("click", moveButtonClickHandler);
$('#btnzoomIn,#btnzoomOut').bind("click", zoomButtonClickHandler);
function zoomButtonClickHandler(e) {
var scaleToAdd = 0.8;
if (e.target.id == 'btnzoomOut') scaleToAdd = -scaleToAdd;
$('#viewsite_iframe').smartZoom('zoom', scaleToAdd);
}
function moveButtonClickHandler(e) {
var pixelsToMoveOnX = 0;
var pixelsToMoveOnY = 0;
switch (e.target.id) {
case "btnLeft":
pixelsToMoveOnX = 50;
break;
case "btnRight":
pixelsToMoveOnX = -50;
break;
case "btnUp":
pixelsToMoveOnY = 50;
break;
case "btnDown":
pixelsToMoveOnY = -50;
break;
}
$('#viewsite_iframe').smartZoom('pan', pixelsToMoveOnX, pixelsToMoveOnY);
}
try {
$('#viewsite_iframe').attr('src', "http://www.w3schools.com/");
if ($('#viewsite_iframe').smartZoom('isPluginActive')) {
$('#viewsite_iframe').smartZoom('destroy');
}
$('#viewsite_iframe').smartZoom({
'containerClass': 'zoomContainer',
'easing': 'smartZoomEasing',
'dblClickEnabled': true, // enable plugin mouse doubleClick behviour
'mouseMoveEnabled': false, // enable plugin target drag behviour
'moveCursorEnabled': true, // show moveCursor for drag
'touchEnabled': true, // enable plugin touch interaction
'dblTapEnabled': true, // enable plugin double tap behaviour
'pinchEnabled': true, // enable zoom when user pinch on target
'touchMoveEnabled': true, // enable target move via touch
'maxScale': 1.8,
'zoom': 0.1
});
} catch (e) {
alert(e)
}
});
are you using phonegap developer app to test your application ? If yes, for external links, usingg IFrame is not working properly for IOS on phonegap developer app. You need to build ipa file.
My problem is similar to the below link
How to get the dropped item's id on drop event jquery
However I am dragging and dropping a list item, each contain images.
When the list item is dropped, I need to get the 'id' attribute, which will then be passed to php on 'submit', to update the database.
But the below code does not seem to be capturing the 'id' attribute or if i try 'src', I have amended the following
$("#drop").text(id); to $("#drop").text("image has been dropped");
which does display correctly, "image has been dropped" upon a drop event, so the problem seems to be with getting the 'id' attribute within a list item? I tried adding a class called 'image' to use instead of the list item, tried many things, but makes no difference!
Hope someone can point me in the right direction!
Thanks
below is my code
JQuery
$(document).ready(function() {
$("#item-slider li").draggable({
containment: 'document',
revert: true,
helper: "clone",
cursor: "move"
});
$("#drop").droppable({
accept: "#item-slider li",
drop: function (event, ui){
var draggable = ui.draggable;
var id = draggable.attr("id");
$("#drop").text(id);
}
});
});
Html
<div id="item-slider">
<ul>
<li class='image'><img src="./images/jeans1.jpeg" id="jeans1.jpeg" /></li>
<li class='image'><img src="./images/top2.jpg" id="top2.jpg" /></li>
<li class='image'><img src="./images/top1.jpg" id="top1.jpg" /></li>
<li class='image'><img src="./images/shoes3.jpg" id="shoes3.jpg" /></li>
<li class='image'><img src="./images/dress1.jpg" id="dress1.jpg" /></li>
</ul>
<div id="drop">
</div>
</div>
The id attributes you're looking for do not belong to your <div> elements, but to their <img> children. You can match these elements with find() or children():
drop: function(event, ui) {
var id = ui.draggable.find("img").attr("id");
$("#drop").text(id);
}
I'm trying to enable each of the list items classed "draggable" to be drag enabled for dropping into the #content div. However, the first problem is that I'm not getting an alert on the click handler. What am I missing?
<script type="text/javascript" src="<?php echo plugins_url('', __FILE__)?>/jquery-ui.js"></script>
<script type="text/javascript">
jQuery('.draggable').click
(
function()
{
alert('clicked'); //DOES NOT FIRE
jQuery(this).draggable();
jQuery( "#content" ).droppable
({
drop: function( event, ui )
{
//drop/paste jQuery(this).text();
}
});
});
</script>
<ul class="keywords">
<li class="draggable" id="kw-1">keyword one</li>
<li class="draggable" id="kw-2">keyword two</li>
<li class="draggable" id="kw-3">keyword three</li>
</ul>
Can you check if your jquery is loaded correctly? Your script only shows that you are loading jquery-ui.js.
Otherwise, your code works when both jquery and jquery-ui are loaded.