Recently, I came across an issue where I have both an Image and a custom text element placed between them using an input box. My goal is to make both the text and the image draggable on the page. However, I noticed that while the image can be dragged and dropped multiple times, the text element can only be dragged once. I'm trying to identify the main problem causing this inconsistency. Could you please help me pinpoint the issue?
Jquery
$(function() {
$('#uploadedPhoto').draggable({
containment: '#dragDiv'
});
});
$(function() {
$('.customText').draggable({
containment: '#dragDiv'
});
});
CSS
.customText {
position:absolute;
cursor:move;
font-size: 3em;
}
#uploadedPhoto {
display:none;
position:relative;
cursor:move;
max-height:100%;
max-width:100%;
left: 2.5em;
opacity:0.70;
}
JQuery versions (links in html file)
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
Thanks