Allow users to select an arbitrary element on the page_问答_开发者

I'm coding a templating system that is supposed to support easily converting any old html/xhtml form into a format that can be used with my system (it's a template system for my cms).

Here's what I'm aiming for:

The user clicks a "Zone Define" button for example: "Content", "Sidebar", etc
When the user hovers any elements they become get a border or are highlighted somehow
If the user clicks that element it is modified to have a class like 'zone-content'
The page sends the new html to the script via ajax

Is there any already existing libraries that would facilitate something like this?

UPDATE:

I ended up using the answers below and hacking together a jquery solution (we're going to use jquery in the rest of the project). It's a bit ugly and hacky bu开发者_运维知识库t it works http://ilsken.com/labs/template/

I personally am a fan of ExtJS (now Sencha), and this is fairly simple and straightforward to do using that framework. This is how I'd do it:

<body>
  <button id="content_define" class="zone_define">Content</button>
  <button id="sidebar_define" class="zone_define">Sidebar</button>
  <div id="template">
    <!-- put your template here -->
  </div>
</body>

<script type="text/javascript">
Ext.onReady(function() {
  Ext.select('button.zone_define').on('click', function(ev, target) {
    ev.stopEvent();

    // this listener is bound to two buttons, determine which one was pressed
    var zone = target.id.split('_')[0]; // 'content' or 'sidebar'

    // add a click listener listener to the template so that when an element within is clicked,
    // an Ajax request is initiated
    var template = Ext.get('template');
    template.addClass('targetable').on('click', function(ev, target) {
      template.removeClass('targetable');

      // this part is optional, in case the user clicks an <a> or <img> element,
      // you may want to get the block element containing the clicked element
      var target = ev.getTarget('div'); // or ul, table, p, whatever

      // invoke zone_capture on the click target (or containing block element)
      zone_capture(zone, target);
    }, window, {single: true});
    // the {single: true} part removes this listener after one click,
    // so the user has to go back and press the button again if they want to redefine
  });

  // this is the code to do the ajax request
  // and also add a class to the target element
  function zone_capture(zone, target) {
    // first, remove the class from elements which are already defined as this zone
    Ext.select(String.format('#template .{0}_zone', zone)).removeClass(zone + '_zone');

    // now add that class to the target
    target.addClass(zone + '_zone');

    // do the POST
    Ext.Ajax.request({
      method: 'POST',
      url: '/region/define',
      params: { // these are the params POSTed to your script
        template: Ext.get('template').dom.innerHTML
      }
    });
  }
});
</script>

I would also add the following CSS rules for hovering effects, etc.

#template.targetable:hover div { /* add div, p, table, whatever */
  border: 1px solid #f00;
}

#template.targetable {
  cursor: crosshair;
}

I would call this pseduo-code, but the idea should be enough to get you started. Since you are dealing with user input, you will have a lot of corner cases to check for before you can call this production-ready. It sounds like a cool way to define the template, good luck!

In plain old jQuery, let's see if I get your question. First, some markup:

<div id="header"></div>

<div id="sidebar"></div>

<div id="main">
    <div class="moveable-element">
        <ul class="content-panel">
            <li><a href="#" id="header">Header</a></li>
            <li><a href="#" id="sidebar">Sidebar</a></li>
            <li><a href="#" id="main">Main</a></li>
            <li><a href="#" id="footer">Footer</a></li>
        </ul>
        <p>This is content in the moveable-element.</p>
    </div>
</div>

<div id="footer"></div>

And the jQuery script (something like this):

$(function() {
    $('.moveable-element').hover(function() {
        $(this).find('.content-panel').show();
        $(this).css('border', '1px solid red');
    }, function() {
        $(this).find('.content-panel').hide();
        $(this).css('border', '1px solid black');
    }

    $('.content-panel a').click(function() {
        var class_name = $(this).attr("id");
        $(this).parents('.moveable-element').appendTo($('#'+class_name));
    }
}

And some parts of the CSS:

.content-panel {display: none; position: absolute;}
.moveable-element {border: 1px solid black; position: relative}

NOTE: I don't see the purpose of the AJAX in your question, please clarify. Also, this is very rough and for informational purposes, please don't expect it to work out of the box as is. If you want me to revise it though, I'd be happy to, just ask.

its simple to implement it in jQuery : this simple example how to change an element class when its clicked by the users

<script type="text/javascript">
         $('a').click(function(){
               $(this).attr('class','newClass');
          });
             //mouseover
         $('a').mouseover(function(){
               $(this).attr('class','newClass');
          });
</script>