I'm trying to create a type of moodboard where you can drag drop and resize pictures on.
but i want to create a carousel that shows the available pictures that you can drag and drop onto or into the mood board div.
i have either the problem that i cant drag the pictures outside the carousel(its as if the pic can be dragged all around but it appears behind the body of the page)
or when i try to remedy this by using clones and append to i have the problem that it doesn't want to stick to the mood board div that i want it to appear in.
here is the js code
$(".jMyCarousel").jMyCarousel({
visible: '5',
eltByElt: true,
evtStart: 'mousedown',
evtStop: 'mouseup'
});
$('.draggable').draggable({
appendTo: 'body',
helper : 'clone' ,
revert: 'invalid',
opacity: .5,
zIndex: 100
});
$('#dropzone').droppable({
})here is the php/html
<div id="right" class="dropzone" style=" background:none; border:thin black red; width:550px; height:380px; margin-left:200px; margin-right:0px ">
<h2 style="margin:10px">Collage Wijzigen</h2>
<div id="dropzone" style=" background:none; border:thin black blue; height:300px">
</div>
<div id="fotonav" style="background:none; border:thin black solid; padding-top:1px; height:90px">
<div class="jMyCarousel">
<ul>
<li><div class="draggable"><img src="scripts/jMyCarousel/examples/carousel_img/1/1.jpg" width="108" height="80"/></div></li>
<li><div class="draggable"><img src="scripts/jMyCarousel/examples/carousel_img/1/3.jpg" width="108" height="80"/></div></li>
<li><div class="draggable"><img src="scripts/jMyCarousel/examples/carousel_img/1/4.jpg" width="108" height="80"/></div></li>
<li><div class="draggable"><img src="scripts/jMyCarousel/examples/carousel_img/1/5.jpg" width="108" height="80"/></div></li>
<li><div class="draggable"><img src="scripts/jMyCarousel/examples/carousel_img/1/6.jpg" width="108" height="80"/></div></li>
<li><div class="draggable"><img src="scripts/jMyCarousel/examples/carousel_img/1/7.jpg" width="108" height="80"/></div></li>
<li><div class="draggable"><img src="scripts/jMyCarousel/examples/carousel_img/1/8.jpg" width="108" height="80"/></div></li>
<li><div class="draggable"><img src="scripts/jMyCarousel/examples/carousel_img/1/9.jpg" width="108" height="80"/></div></li>
</ul>
</div>
</div>
</div>
<div id="left" style="background:none ; border:thin purple solid; width: 200px; height:420px; margin-top:-380px">
<div style=" width:180px ; height:160px; background:none; border:thin green solid; margin:10px "> FOTO</div>
<div id="navigatiediv" style=" margin-left: 3px; margin-top:145px">
<ul>
<li><a href="?pagina=mijnberichten"><b>Mijn Berichten</b></a></li>
<li class="?pagina=gegevenswijzigen"><a href="gegevenswijzigen.php"><b>Gegevens Wijzigen</b></a></li>
<li><a href="?pagina=profielfotowijzigen"><b>Profielfoto Wijzigen</b></a></li>
<li><a href="?pagina=collagewijzigen"><b>Collage Wijzigen</b></a></li>
</ul>
</div>
</div>and here is a part of the index page so you can see wich libraries im u sing
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="autobay" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<link type="text/css" href="scripts/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="scripts/ui/ui.core.js"></script>
<script type="text/javascript" src="scripts/ui/ui.draggable.js"></script>
<script type="text/javascript" src="scripts/ui/ui.droppable.js"></script>
<script type="text/javascript" src="scripts/ui/ui.dialog.js"></script>
<script type="text/javascript" src="scripts/ui/ui.accordion.js"></script>
<script type="text/javascript" src="scripts/jMyCarousel/jMyCarousel.js"></script>
<script type="text/javascript" src="scripts/jquery.mb.containerPlus.2.4/jquery.mb.containerPlus.2.4/inc/mbContainer.js"></script>
<script type="text/javascript" src="scripts/jquery.mb.containerPlus.2.4/jquery.mb.containerPlus.2.4/inc/jquery.metadata.js"></script>
<script type="text/javascript" src="scripts/external/bgiframe/jquery.bgiframe.js"></script>
<script type="text/javascript" src="js/inloggen.js"></script>i think the problem arises because the carousel is using a list
anyway i apreciate the feedback thanks