Movable box

JavaScript
1

I have a webpage at http://dot.kr/x-test/move1.php.
The page has the code below.
The page has a gray box.
I like to move the box movable on the webPage by user’s mouse.
I don’t like to use flash for it.
If possible I like to use javascript for it.
Can I make the gray box movable with javascript ?

2

Yes… You just need to use the attribute dragable="true" on the element you want to be dragable and then apply a simple JavaScript to process all the various drag/drop events - for example the following assumes that all of the dragablle elements need to stay inside a div with id=“columns” and that the dragable elements have a class=“column”

(function() {
"use strict";
var dsrc, cols, fDragStart, fDragOver, fDragEnter, fDragLeave, fDrop, fDragEnd;

dsrc = null;
fDragStart = function(e) {
  this.style.opacity = '0.5';
  dsrc = this;
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
};
fDragOver = function(e) {
  if (e.preventDefault) {
    e.preventDefault();
  }
  e.dataTransfer.dropEffect = 'move';
  return false;
};
fDragEnter = function(e) {
  this.classList.add('over');
};
fDragLeave = function(e) {
  this.classList.remove('over');
};
fDrop = function(e) {
  dsrc.style.opacity = '1.0';
  if (e.stopPropagation) {
    e.stopPropagation();
  }
  if (dsrc != this) {
    dsrc.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');
  }
  return false;
};
fDragEnd = function(e) {
  [].forEach.call(cols, function (col) {
    col.classList.remove('over');
  });
};

cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
  col.addEventListener('dragstart', fDragStart, false);
  col.addEventListener('dragenter', fDragEnter, false)
  col.addEventListener('dragover', fDragOver, false);
  col.addEventListener('dragleave', fDragLeave, false);
  col.addEventListener('drop', fDrop, false);
  col.addEventListener('dragend', fDragEnd, false);
});
})();
1 Like
3

Thank you for your help, felgal.
I applied your code at http://dot.kr/x-test/move2.php and http://dot.kr/x-test/move3.php.

But the gray boxes are NOT movable in both move2.php and move3.php.

What’s wrong in my applying your code?

4

I know felgall (and probably Ralph) will disagree with me, but I would suggest using jQueryUI Draggable
All you need to do is include the jQuery library and the jQuery UI library on your page, then do:

<div id="draggable"></div>
<script>$("#draggable").draggable();</script>

Here’s a demo of it working.

Yeah, this didn’t work for me either. Here’s what I tried.
Did I miss something?

5

No, I’d actually agree with you in this instance. Creating dragable sections of web pages is not all that straightforward as it is very dependent on your getting the HTML, CSS and JavaScript all defined correctly so that they interact properly. Unless the person creating the page has a relatively advanced level of JavaScript knowledge their chances of getting all three set up correctly to work together correctly without lots of rewrites is slight. Using the jQuery UI would be a lot quicker and more reliable for most people.

The code I posted earlier in the thread was simply an example of the sort of code you need for the JavaScript portion of such a script.

2 Likes
6

Thanks to felgall and pullo,
I have a gray box which is draggable at http://dot.kr/x-test/move4.php
In case of deskTop I can drag it with my mouse.
However in case of smartPhone, i.e, android or iPhone, I cannot drag it with my fingers.
Can I make it draggable not only in deskTop, but also in smartPhone with your help?

7

I’ve never used it, but this looks like it should do what you’re after: http://touchpunch.furf.com/