I wanted to know how to do a drag and drop image tag using javascript. I know html5 each element can be dragged but I wanted to make it work on older browser. I have made the drag and drop using javascript and it worked fine except in ie and firefox when mouse down, the mouse move event didn't react unless the user click it, and that is the reaction of ie. On firefox, the image got changed to semi-transparency and draggable but my code that dragging it.
Can anyone know how to solve this problem ? please help.
Have you tried jQuery yet? with the addon jQuery ui you can drag and drop every object on a website..
jQuery UI: draggable
Related
Is there a simple way to implement drag and drop for Safari or is not supported?
I've been only able to listen for events when the element is dropped to the target textarea. The main problem is I am not able to detect the exact position where the draggable text was dropped, and just works by appending it at the end of the textarea.
From this answer I managed to add the text:
Allow drag text and drop it in html input field without clearing previous data (only works on Safari)
The drag and drop is done natively somehow on Chrome and Firefox (this last one requires the entire text is selected and set to draggable).
I'd like to know if there is a trick for web-kit so it just works like the Firefox trick.
Implement Firefox trick. (Not tested without selecting via JS all the draggable text)
Detect via JS if Safari browser is being used and if so perform the following:
Remove draggable attribute from the draggable element:
item.removeAttribute('draggable')
Add the Safari proper draggable attribute:
item.setAttribute('style', '-webkit-user-drag:element;')
Safari example of proper draggable element:
<span style="-webkit-user-drag:element;">DRAGGABLE TEXT</span>
Source: https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html
materializecss select box in Internet explorer 9 or more it can't be able to scroll using mouse button,click on the scroll bar inside the select box it diapers. But all other remaining browsers working properly.
i have also attached the sample screen shot,kindly help to solve this issue..
You will need to add a behavior for mouse down events in addition to triggering a close. Check out issue #901 at https://github.com/Dogfalo/materialize/issues/901
I am currently in the process of building a web app. I am trying to get an image when clicked to change image source and then hide one div and show another. This seems to work fine when viewing within a browser but when viewed on an iPad the button image change doesn't work. An example of what I am currently doing is below:
$("#pg3rgt_en_GB").click(function(){
$(this).css("background-image","url(images/right-button-down.jpg)");
setTimeout(function(){
$("#introduction_en_GB").hide();
$("#pg3rgt_en_GB").css("background-image","url(images/right-button.jpg)");
$("#customerinput_en_GB").show();},250);
I hope that this is something simple I am missing. I appreciate any help and thanks in advance!
Safari doesn't recognise the show and hide features that jQuery has to offer. The best way around this would be to assign different css classes - which safari does recognise!
I'm looking for functionality to allow a user to mousedown and drag to select multiple items. The action would be essentially what you see in the Mac Finder or Windows Explorer.
This might be a duplicate of JavaScript Drag & Select functionality done right and the answer http://threedubmedia.com/code/event/drop/demo/selection is decent, but a little buggy.
Anyone know of any good solutions?
I want to use Jquery to implement a page that contains js from quotemedia.com. After I embed the js into the sortable, when I drag and drop the element that contains the js, it jump to full page display.
This happens under Firefox, IE is ok.
The running code is here: http://jsfiddle.net/dodoflying/9BkJ5/ Please use firefox to drag and drop element shopping to see the problem.
Is is a bug under firefox? How could I solve this problem?
Thanks in advance!
Don
I don't know if it's a bug on FF or a bad implementation in IE, anyway if you don't have a problem put the JS in a seperate html and include the html page in an iframe you'll still see the iframe reloaded but not the whole page, refer for this link for more info.
iFrame reload on sortable
Edit: by the way, you don't need to connect the list to itself...it's already connected so this is not needed:
$( ".column" ).sortable({
connectWith: ".column"
});
Now back to the main issue, as you can see the iframe (or your code) will be reloaded each time you change it's order in the dom tree, so instead of using sortable..maybe you will be able to come up with a similar effect by absolutely position these DIVs and change their position (CSS top & left using JS) when dragging them but this would require A LOT of work.
I just found it could be solved by using Jquery to remove the following javascript
<script src="http://app.quotemedia.com/quotetools/miniCharts.go?webmasterId=93004&symbol='.$symbol_chart.'&toolWidth=660&chhig=130&chbg=ffffff&chln=333333&chgrd=D5DDE8&chxyc=2B5286&chtcol=2B5286&chbgch=ffffff&chbdr=2B5286&chfill=ee5E739B&chfill2=8BA9E0" type="text/javascript" language="javascript"></script>
Under both Firefox and IE, it is ok.