How to reorganize event listeners in javascript
You could simply declare the functions inline, like:

element.addEventListener("mousedown", function (e){
  dragging = true;
  startX = e.pageX;
  startY = e.pageY;
  element.style.opacity = 0.5;
}, false);


And likewise for the other 2 functions.

But that can get messy in a hurry. Especially because startX, startY and dragging would still be outside.

So instead you could put the handler in an object literal, just to keep them separated:

var dragEvents, element = document.getElementById("whatever"),

dragEvents = (function () {
  var dragging = false, startX, startY;
  return {
    start: function (e){
      dragging = true;
      startX = e.pageX;
      startY = e.pageY;
      element.style.opacity = 0.5;
    },

    move: function (e){
      if (!dragging) return;
      var deltaX = startX - e.pageX;
      var deltaY = startY - e.pageY;
      //apply to element
    },

    end: function(e){
      dragging = false;
      element.style.opacity = 1;
    }
  };
}());

element.addEventListener("mousedown", dragEvents.start, false);
document.addEventListener("mousemove", dragEvents.move, false);
document.addEventListener("mouseup", dragEvents.end, false);


I've wrapped it in an immediately invoked function so the dragging-related vars can be kept in there too.

However, might as well go the extra step and put everything in a function, instead of relying on element being a closure:

function makeDraggable(elementId) {
  var startX,
      startY,
      dragging = false,
      element = document.getElementById(elementId);

  function start(e){
    dragging = true;
    startX = e.pageX;
    startY = e.pageY;
    element.style.opacity = 0.5;
  }

  function move(e){
    if (!dragging) return;
    var deltaX = startX - e.pageX;
    var deltaY = startY - e.pageY;
    //apply to element
  }

  function end(e){
    dragging = false;
    element.style.opacity = 1;
  }
  element.addEventListener("mousedown", start, false);
  document.addEventListener("mousemove", move, false);
  document.addEventListener("mouseup", end, false);
}


The last suggestion I'd make would be to skip the dragging variable in favor of simply adding the move and end handlers on mouse down, and removing them on mouse up, like so:

function makeDraggable(elementId) {
  var startX,
      startY,
      element = document.getElementById(elementId);

  function move(e){
    var deltaX = startX - e.pageX;
    var deltaY = startY - e.pageY;
    //apply to element
  }

  function end(e){
    element.style.opacity = 1;
    element.removeEventListener("mousedown", move, false);
    element.removeEventListener("mousedown", end, false);
  }

  element.addEventListener("mousedown", function (e){
    startX = e.pageX;
    startY = e.pageY;
    element.style.opacity = 0.5;
    document.addEventListener("mousemove", move, false);
    document.addEventListener("mouseup", end, false);
  }, false);
}