-3

In this file: http://jsfiddle.net/sntshkmr60/4KsHg/

All the <p> tags are fixed to their places. I want to make all the <p>s movable so I can drag it to any other place on the page. Its similar to some kind of photo gallery.

Is it possible with pure JavaScript? or else jQuery?

Please note that I already have something like transform:rotate(30deg) that makes the paragraph tilt on its axis.

Santosh Kumar
  • 26,475
  • 20
  • 67
  • 118
  • You'll probably go further if you include information such as what in particular is not working, what error messages you are experiencing, your environment, etc. Below you can see 5 people have given you essentially the same answer, which should tell you that is very likely the way that this is supposed to work. If it doesn't work, it's probably because either a) The answerers do not fully understand your requirement, or b) what works for them does not work for you. Either way, you hold the information they need to help you, and you appear to be holding it hostage – Chris O'Kelly Apr 26 '13 at 04:15
  • A few links that might shed some light on the CSS transform issue. I still think you ought to edit your question to reflect the actual problem btw. http://stackoverflow.com/questions/14919088/sortable-with-transform-rotate-dragging-issue http://stackoverflow.com/questions/3523747/webkit-and-jquery-draggable-jumping http://bugs.jqueryui.com/ticket/9091 edit: I see now these are not related to your problem, looks like it's just a typo issue. If you wanted to sort, rather than drag, those links might help (looks like sorting doesn't work great with transformed elements). – Chris O'Kelly Apr 26 '13 at 04:36

5 Answers5

2

Take a look at jQuery UI Draggable:

http://jqueryui.com/draggable/

andleer
  • 22,388
  • 8
  • 62
  • 82
1

It can be done with jQuery UI (http://jqueryui.com/). Once you've included the scripts into your document, you can now call:

$(elements).draggable();
Arnelle Balane
  • 5,437
  • 1
  • 26
  • 32
1

It is possible with a single method call using jQuery UI.

jQuery UI Draggable

Draggable Fiddle

$("p").draggable();
c.P.u1
  • 16,664
  • 6
  • 46
  • 41
  • Doesn't works for me: http://synaptik.heliohost.org/tilt – Santosh Kumar Apr 26 '13 at 04:05
  • @SantoshKumar the paragraphs are draggable in the link you provided – c.P.u1 Apr 26 '13 at 04:24
  • But they aren't rotated, see the page source (I am trying to rotate them with css). – Santosh Kumar Apr 26 '13 at 04:31
  • Brother, if you look closely at the source, you are applying style rules based on the IDs: one, two and three. The

    elements, however, don't have an id attribute present on them. It should be

    This is the first paragraph

    This is the second one

    Here comes the third one

    instead of

    This is the first paragraph

    This is the second one

    Here comes the third one

    – c.P.u1 Apr 26 '13 at 04:53
1

use jQuery .draggable(). see documentation.

http://jqueryui.com/draggable/

Jude Duran
  • 2,195
  • 2
  • 25
  • 41
1

Add -

    <script type="text/javascript">
  $(function() {
    $( "p" ).draggable();
  });
    </script>

below this line -

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

FYI- Try to read jQuery error using debugger(firebug or chrome developer tool), Check SOURCE code..it is something like this -

    <script type="text/javascript">
  $(function() {
    $( "p" ).draggable();
  });
    </script>
  </head>
  <body>
    <p class="rand"> This is the first paragraph  </p>
    <p class="rand"> This is the second one  </p>
    <p class="rand"> Here comes the third one  </p>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  </body>
</html>
swapnesh
  • 26,318
  • 22
  • 94
  • 126