0
Je veux créer un effet pouvant être traîné et triable comme celui de http://www.bbc.co.uk/.Créer un effet triable déplaçable comme celui de BBC
Pour cela j'ai utilisé Jquery UI et obtenu un peu le même effet. Mais avec des complications, si vous voyez l'effet sur le site Web de la BBC, lorsque vous choisissez une division, il y a une ombre avec une ligne pointillée en dessous et le décalage entre les cases est très différent. Lors de l'utilisation de l'interface utilisateur JQuery, j'ai flotté <li> pour les afficher côte à côte, mais lorsque je déplace les boîtes, la boîte de décalage est insérée entre les boîtes.
Voici mon codage jusqu'à présent. Mais ce n'est pas celui de la BBC
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />
<script src="js/lib/jquery.js"></script>
<script src="js/lib/ui.js"></script>
<script src="js/lib/widget.js"></script>
<script src="js/lib/utilities/mouse.js"></script>
<script src="js/lib/interactions/draggable.js"></script>
<script src="js/lib/interactions/sortable.js"></script>
<style>
* { margin:0;padding:0; }
body {
background:url(themes/default/images/background.gif);
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
#wrapper {
width:980px;
margin: 0 auto;
border:1px #F00 solid;
}
.sublayout {
width:300px;
height:300px;
background:#aeadad;
border:1px #2495f5 solid;
float:left;
margin:1em;
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;
}
</style>
<script type="text/javascript">
$(function() {
$("#sortable").sortable({
revert: true
});
$("#draggable").draggable({
connectToSortable: '#sortable',
helper: 'clone',
revert: 'invalid'
});
$("ul, li").disableSelection();
});
</script>
</head>
<body>
<div id="wrapper">
<ul id="sortable">
<li class="ui-state-default sublayout">Item 1</li>
<li class="ui-state-default sublayout">Item 2</li>
<li class="ui-state-default sublayout">Item 3</li>
<li class="ui-state-default sublayout">Item 4</li>
<li class="ui-state-default sublayout">Item 5</li>
</ul>
</div>
</body>
</html>