1

I have a div board which loads draggable and resizable content from a database.

I use this code to request the code.

$MBId = $_GET['id'];///the id I get from the URL
if ($MBId != null)
{
    $sqlmoodboard= "SELECT Content  FROM Moodboards WHERE Id ='$MBId' ";
    $result = mysql_query("$sqlmoodboard ");

    while($row = mysql_fetch_array($result))
    {
        echo "<div id=\"print\">";
        echo $row['Content'];
        echo "</div>";
    }
}

I get code from the database which looks like

  <div class="ui-draggable sleep ui-resizable" style="position: absolute; left: 450px; top: 117px;">

 <img src="/imgurl.jpg" class="center">

 <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>

 <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>

 <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>

Source on the page.

 <div class="ui-draggable sleep ui-resizable" style="position: absolute; z-index: 1; left: 143px; top: 78px;">
                                              <img src="/imgurl.jpg" class="center">
                                        <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;">
                                        </div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;">
                                        </div>
                                        <div class="ui-resizable-handle 
                                        ui-resizable-se
                                        ui-icon
                                        ui-icon-gripsmall-diagonal-se"
                                        style="z-index: 90;">
                                        </div>
                                        
                                              <div class="ui-resizable-handle 
                                        ui-resizable-e" 
                                        style="z-index: 90;"></div>
                                        <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;">
                                        </div>
                                        <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;">
                                        </div></div>

In my <head> I have

<script>
$(document).ready(function()
{
    $(".sleep").draggable();
    $(".sleep").resizable();
 });
</script>

the image is draggable, but I can't get resizable working.

I used

$(document).ready(function()
{ });

At the end it should be like http://jsfiddle.net/75PvA/4/ but after loading the content from the database.

So I know the content is loaded before I 'reset' the resizable function.

Note I posted a similar question but I asked the question wrong so I closed that one

My solution

I have changed my save function now before I save to the database I call destroy(to remove resizable).

Then I save the div to the database.

Then I refresh the page to make it load the latest saved file, then I use .resizable({aspectRatio: true}) Everything works now, but no answer to the question.

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Sven van den Boogaart
  • 11,833
  • 21
  • 86
  • 169
  • Are elements with `class="sleep"` added dynamically to the page? – andyb Apr 18 '13 at 09:07
  • the page is loaded, if the url has a get variable like ?id=1 at the end, the query like in the question will be executed. so the content gets loaded from the database depending on the id variable, not sure if thats called dynamically. – Sven van den Boogaart Apr 18 '13 at 09:12
  • 1
    I think I have an idea of how the application might work and I don't believe the `.sleep` elements are dynamic. In the `code from the database` in the question, is that code actually stored in the database? All those `
    `s are added by jQueryUI when you call `.draggable()` and `.resizable()` so my question is, what the the `HTML` look like? Can you _View Source_ of the page and add that to this question please?
     – andyb Apr 18 '13 at 10:53
  • andyb i edited the question – Sven van den Boogaart Apr 18 '13 at 11:10
  • Thanks for the update but I'm still puzzled as the jQueryUI classes should added automatically by calling `$('.sleep').draggable();` on a simple `
    `. Are you really creating all that `HTML` yourself?     – andyb Apr 18 '13 at 12:41
  • Here is a link to the page its all about, http://ve.svenboogaart.nl/test/index.php you can dragg items from the right to the left white div, if you pres open you can open files wich are made before – Sven van den Boogaart Apr 18 '13 at 12:42
  • Edit: I just found the site from your other question :-) Was the [answer](http://stackoverflow.com/a/16017653/637889) not correct for you? Edit2: I'll have a look at the site now! – andyb Apr 18 '13 at 12:42
  • No i load the file so they can continue the work and edit it, its like opening a word file you want to be able to edit the things you already made and not that they are permanent. the save as image is to save what you made to your desktop as an image ;) – Sven van den Boogaart Apr 18 '13 at 12:44
  • OK, I can reproduce the problem on your site. I'll have a look through the code – andyb Apr 18 '13 at 13:01
  • 1
    Did I not provide an acceptable answer to the problem. The jQueryUI functions were not being applied as jQueryUI was already detecting the _resizable_ or _draggable_ classes on the elements you were reading back from the database. And not even a `+1` for the time I spent helping. – andyb Apr 18 '13 at 15:37
  • Voted 2 comments up and your 'answer' thanx for helping – Sven van den Boogaart Apr 19 '13 at 06:47

4 Answers4

1

There's a lot of code on the page so it's very confusing to try and isolate the problem and solution. However, I think that jQueryUI is detecting that the resizable CSS classes have been already added to the elements you want to resize. So it is not adding any of the event handlers.

So you need to completely remove all the jQueryUI classes first with:

$(".sleep").resizable('destroy')

first and then re-adding the resizable functionality with

$(".sleep").resizable({handles: 'e, s, se'})

However, there is a .click event on the elements which re-adds .resizable() which was breaking the placement of the south-east resize handle.

The same logic applies to the .draggable(). It needs to be destroyed first before attempting to re-add the functionality.

It would be far easier to simply store the positions of the pictures when a user saves their image rather than all of that markup. Then the markup will be clean (and jQueryUI-class free) therefore calling .resizable() on clean markup will work as expected.

andyb
  • 43,435
  • 12
  • 121
  • 150
  • Thx i was thinking about it, but this was the easyses way to save, the hack aint working not draggable after readding the resizable – Sven van den Boogaart Apr 18 '13 at 13:33
  • I tested this locally in Chrome by executing the two commands in the _DevTools Console_ and it fixed the resizable and the images were still draggable at that point. Maybe we just neee to find the correct place to call `resizable('destroy')` and then `.resizable({handles: 'e, s, se'})` in your code – andyb Apr 18 '13 at 13:43
  • Update: i have changed my save function now before i save to the database i call the destroy, then i refresh the page to make it load the latest saved file, then i use .resizable() it works but the handlers are a bit off – Sven van den Boogaart Apr 18 '13 at 13:48
  • I forgot aspectRatio: true added this and now everything is working. – Sven van den Boogaart Apr 18 '13 at 13:52
  • Good to read that it is working. A good idea to destroy the `.resizable()` first before saving, which will remove the markup. As I mentioned in my answer the handlers were off but good to see that you got that fixed also. – andyb Apr 18 '13 at 15:01
0

try this.

<div id="drag" class="ui-draggable sleep ui-resizable" style="position: absolute; left: 10px; top: 17px; height: 50px; width: 50px;">
    <img src="/imgurl.jpg" class="center" />

 <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>

 <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
</div>

http://jsfiddle.net/SanketS/75PvA/2/

this is an example given for your question.

SanketS
  • 963
  • 1
  • 13
  • 36
0

if you remove last div tag 

<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>

if you not necessary then it will work fine. try this jsfiddle.net/SanketS/75PvA/2

SanketS
  • 963
  • 1
  • 13
  • 36
0

There are a few issues with what you're doing, though I can't specifically say if one (or any) are causing the problem you're seeing. You're supplying a lot of code, but it's so disjointed that it's hard to isolate what's going on.

  1. You're doing a while loop from the db, but assigning an id of print. If you have more than one row, it's going to cause problems because multiple elements will have the same id.
  2. Your "code from the database" isn't balanced. You have one more opening div than closing. This will obviously cause issues, but I don't know if it's the result of pasting into the question or if the data is truly bad.
  3. As andyb mentioned, you don't actually need to (and shouldn't be) adding those divs in the first place. jQuery handles that. See the updated fiddle working at: http://jsfiddle.net/75PvA/5/
  4. Your whole database is at risk. You're trusting user-entered values without even the most basic of checks. Stop using mysql_* functions, and start using PDO.

The last one is definitely not the source of your current problem, but has far more damaging implications down the road.

David Kiger
  • 1,958
  • 1
  • 16
  • 25
  • The while loop always returns 1 answer, i look at Content wich is the Content from the original div i have saved. so it could be multiple draggable/resizable images. – Sven van den Boogaart Apr 18 '13 at 12:00