vendredi 24 juin 2016
Jquery drag and drop scrollbar issue
Full HTML file below. Question below that.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<title>slider</title>
<style>
.container{
width: 100%;
heght: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
overflow: hidden;
}
.test{
ooverflow: hidden;
border: 1px solid green;
}
.header{
height: 100px;
border: 1px solid orange;
margin-bottom: 1px;
}
.pices{
width: 255px;
height: 600px;
border: 1px solid black;
overflow-x: scroll;
margin-bottom: 40px;
margin-right: 25px;
position:absolute;
}
.image{
width: 90%;
height: 200px;
background-color: lightblue;
margin: 10px 0 10px 10px;
}
.board{
width: calc(100% - 300px);
height: 600px;
border: 1px solid red;
float: right;
margin: 0;
}
</style>
<script>
$(document).ready(function(){
$(".image").draggable({
opacity: 0.7,
helper: function(event) {
return $(event.target).clone().css({
width: $(event.target).width()
});
}
});
$(".board").droppable({
accept: ".image",
drop: function(event,ui){
var itemToClone = $(ui.draggable);
$(this).append(itemToClone.clone().css({
width: itemToClone.width(),
margin: 0
}));
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
</div>
<div class="test">
<div class="pices">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
<div class="board">
</div>
</div>
</div>
</body>
</html>
So, I have been trying to Get the divs from the scrollbox to drag out with no luck. It seems they are stuck inside that div due to the overflow-x: scroll but, I need this. Then when they do drop in the right side div they are not the same size or if they are the same size they are not movable. I have tried the following code to get it to work with no luck. Any advice would be helpful thank you. I also have a jsfiddle for working example
/*
// there's the gallery and the trash
var $gallery = $( ".pices" ),
$board = $( ".board" );
// let the gallery items be draggable
$( "div", $gallery ).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move"
});*/
/*$(function() {
$( ".image" ).draggable({
helper: 'clone',
appendTo: 'div.board'
});
$(".image").draggable({
zIndex: 999
});
$( ".board" ).droppable( {
accept: '.image',
});
});*/
/*$(function() {
$( ".image" ).draggable({
containment: $('.pices'),
helper: 'clone'
});
$( ".board" ).droppable( {
accept: '.image'
});
});*/
/*$(function() {
$( ".image" ).draggable({
revert: true,
zIndex: 9999,
appendTo: 'board',
start: startedDrag,
stop:stoppedDrag
});
function startedDrag() {
$('.pices').css({
overflow: 'visible',
});
$('.test').css({
overflow: 'hidden',
});
}
function stoppedDrag() {
$('.pices').css({
overflow: 'scroll',
});
}
$( ".board" ).droppable( {
accept: '.image'
});
});*/
/*$(function() {
$( ".image" ).draggable({
scroll: false,
revert: 'invalid'
});
$( ".board" ).droppable( {
drop: function(event, ui) {
//jQuery(this).addClass('dropped');
var clone = ui.draggable;
clone.appendTo(this);
// this assumes the mouse grabbed in the middle of the div
//var width = clone.width();
//var height = clone.height();
//clone.offset({'top':event.pageY-height/2 ,
// 'left':event.pageX-width/2 })
}
});
});*/
/*$( document ).ready(function() {
$( ".image" ).draggable({
helper: 'clone',
zIndex: 9999999
});
$( ".board" ).droppable({
accept: '.image',
drop: function( event, ui ) {
$(ui.draggable).clone().appendTo($(this));
}
});
});*/
/*$( document ).ready(function() {
$( ".image" ).draggable({
helper: 'clone',
zIndex: 9999999
});
$(".board").droppable({
accept: ".image",
drop: function(event, ui) {
var cloned = $(ui.helper).clone();
cloned.attr("id", "clonedElem" + counter);
var pos = $(ui.helper).offset();
var draggableOffset = ui.helper.offset(),
droppableOffset = $(this).offset(),
left = draggableOffset.left - droppableOffset.left,
thisTop = draggableOffset.top - droppableOffset.top;
cloned.css({
"position": "absolute",
"left": left,
"top": thisTop
});
cloned.attr("visible", "true");
cloned.draggable({
containment: 'parent',
stop:function(ev, ui) {
console.log("aqui");
}
});
$(".board").append(cloned);
counter++;
}
});
});*/
/*$( document ).ready(function() {
$( ".image" ).draggable({
helper: 'clone',
zIndex: 9999999
});
$( ".board" ).droppable({
accept: '.image',
drop: function( event, ui ) {
$(ui.draggable).clone().appendTo(this);
}
});
});*/
Inscription à :
Publier les commentaires (Atom)
Aucun commentaire:
Enregistrer un commentaire