Dragging one dialog box to another field, adding an overly scrollable panel

Question

When one dialog box, for example, "Iteration 1", is dragged into another dialog box, that is, Release 1 works fine, but adds an unnecessarily scrollable panel to another dialog box, that is, "Release 1". I want to see my dialog box, i.e. 'Iteration 1' in the top left corner.

$(document).ready(function() { $( "#dialogRelease").dialog({ autoOpen: false, modal: false, show: {effect: 'fade', duration: 2000}, hide: "size", resizable:false, draggable:true, height: 360, width: 450, position: [1300,500] }); }); 

Do I need to change something?

Demo code here [http://jsfiddle.net/coolanuj/7683X/14/]

Answer 1

     #dialogIteration {
         overflow: hidden;
     }

This captures the scroll bar, although I think you're looking for something else. Try to concentrate on setting up css correctly before trying to use jQuery plugins. This is a style issue, not a jQuery issue.

Check the documentation for drag and drop, there might be an overflow option, also make sure that all the elements in your dialogs have the correct styles, or you will get very erratic behavior.

Answer 2

If you are talking about dragging boxes in another container after release, the problem is actually in a different place. When you release an item, it is added to its new container, but you do not change the top and left css values ​​of the item being dragged. Thus, it ends with the addition of the visible area. If there is only one container, you can fix it like this:

 function deleteImage($item) { $item.fadeOut(function() { var $list = $("ul", $trash).length ? $("ul", $trash) : $("<ul class='gallery ui-helper-reset'/>").appendTo($trash); ////////position fix///////// $item.css({ top: 10, left: 10 }); $item.find(".placeholder1").remove(); $item.append($gallery).appendTo($list).fadeIn(function() { $item.animate({ width: "200px" }).find(".placeholder1").animate({ height: "250px" }); }); }); } 

If the container needs to accept more elements, you will need to find an algorithm for proper placement.