Cześć wszystkim.
Jestem w trakcie tworzenia dla siebie (uczę się) strony www. Utworzyłem "Wiadomości prywatne" i pomyślałem, że fajnym, na pewno rozwijającym pomysłem byłoby aby wczytywać wiadomości systemem drag and drop.
Póki co wszystko działa, bo przeciągając wiadomość w oknie drop zostaje autor, treść i data wysłania wiadomości. Treraz męczę się, aby poszczególne elementy były wczytywane do różnych divów.
Taki efekt chcę uzyskać
Taki efekt mam
Kod JS:
function setBackground(jQObject, color) {
jQObject.css("background-color", color);
}
function blink(jQueryObject) {
var origColor = jQueryObject.css("background-color");
var baseDelay = 50;
for(var i = 0; i <= 4; i+=2) {
setTimeout(setBackground, baseDelay*i, jQueryObject, "white");
setTimeout(setBackground, baseDelay*i+50, jQueryObject, origColor);
}
}
$(document).ready(function() {
$(".draggable").draggable({
revert: true,
// helper: "clone",
cursor: "move",
drag: function(event,ui){
var $helper = ui.helper;
$($helper).removeClass("selected");
var $selected = $(".selected");
if($selected.length > 1){
$($helper).html($selected.length + " items");
}
}
});
function moveItem($item) {
$item.fadeOut(function() {
$item.find(".item").remove();
});
}
$(".item").click(function(){
$(this).toggleClass("selected");
});
$("#droppable").droppable({
activeClass: "active",
drop: function (event, ui) {
blink($(this));
$(this).html(ui.draggable.text());
}
});
});
#droppable {
position: absolute;
left: 10px;
width: 100%;
height: 500px;
background: white;
color: black;
padding: 10px;
border: 0.5px dashed #999;
}
#zdjecie{
position: absolute;
left: 10px;
width: 20%;
height: 150px;
/*background: white;*/
color: black;
padding: 10px;
border: 0.5px dashed #999;
}
#inst{
position: absolute;
margin-top: -190px;
left: 400px;
width: 250px;
height: 150px;
/*background: white;*/
color: black;
padding: 10px;
/*border: 0.5px dashed #999; */
}
#tytul{
position: relative;
margin-top: -20px;
left: 165px;
width: 200px;
height: 30px;
/*background: white;*/
color: black;
padding: 10px;
border: 0.5px dashed #999;
}
#tresc{
position: absolute;
margin-left: -150px;
/*margin-top: -20px;*/
left: 10px;
width: 685px;
height: 300px;
/*background: white;*/
color: black;
padding: 10px;
border: 0.5px dashed #999;
}
.item{
/*min-width:365px;*/
background-color: #FBFBFB;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
border-style: solid;
border-color: #F0F0F0;
border-width: 0px 0px 2px 0px;
z-index: 300;
}
.selected{
background-color:#ff9900;
}
.list{
height: 100%;
overflow: auto;
}
printf("<div class='item draggable'>
<ul class='list-unstyled msg_list'>
<li>
<a href='#'>
<div>
<span class='image'><img src='avatar/".$zdjecie."'/></span>
<span>
<span>".$od."</span><br />
<span class='time'>".$dataWyslania."</span>
</span>
<span class='message'>".$wiadomosc."</span>
</div>
</a>
</li>
</ul>
</div>");
Z góry dziękuję wszystkim za pomoc i tez z góry przepraszam za błędy w kodzie, jeżeli są ;)
Pomóżcie uczącemu się koledze ;)