1

I build a project something like "trip planner" but I need to add on my cloned div-object an verticl line on left border with css:

.line
  { width:5px, height:200px; background:red;}

so to be something like this (you can see on hover an vertical line)

I was try to do this with code:

$(function() {
    //$( ".draggable" ).resizable();
    $( ".draggable" ).draggable({
      revert: 'invalid', 
      helper:"clone",
      snap: "#drop_here td", 
      opacity: 0.7
    });
    $( "#drop_here td" ).droppable({
      // accept only from left div, 
      // this is necessary  to prevent clones duplicating inside droppable
      accept: '#left .draggable',
      drop: function( event, ui ) {
        // 4 append clone to droppable
        $( this ).append(
          // 1 clone draggable helper
          $(ui.helper).clone()

          // 2 make the clone draggable
          .draggable({
             containment:"#table",
            snap: "#drop_here td" 
          })
          // 3 make the clone resizable
          .resizable());

//HERE IS MY PROBLEM IN CODE
        $(".draggable").hover(function() {
    $(this).append("<div class='line'></div>");
}, function() {
    $(this).removeClass("line");
});
      }
    });
  });

but dont work!

DEMO

Improve this question
2
  • dude it's working..inspect the code.. Commented Jul 14, 2013 at 10:02
  • no, the vertical line on hover won't to show Commented Jul 14, 2013 at 10:03

4 Answers 4

Reset to default
2

The first problem is that your css has a , insted of a ;

.line { 
  display: none;
  width: 5px; 
  height: 200px;
  background: red;
}

Then for the jquery modify like this: 

$('.draggable').hover(function(){
    $(this).find('.line').show();
}, function() {
    $(this).find('.line').hide();
});

In your markup place a .line (only one) just after every .draggable, but not on hover or it will append it every time you hover the .draggable creating tons of .lines

JSfiddle : http://jsfiddle.net/steo/JB7jN/1/

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

very clean solution :)
but I need it only for cloned object... again is the same
dude, you're missing to add .line to draggable, I made it in the one I linked and it worked perfectly. jsbin.com/erofot/157 look this code
1

You have to bind the .hover() in the document ready like this:

$(document).ready(function(){
      $(".draggable").hover(function() {
          $(this).append("<div class='line'></div>");
      }, function() {
          $(this).children('.line').remove();
      });
});
Improve this answer

7 Comments

steo's answer is not realy correct.. it will show and hide all elements with the class 'line'.. but there are none in the first place.. I just copied your code but in the mouseout handler you should not just remove the class of the line element, use $(this).children('.line').remove(); instead. I updated my first post for you.
No, you're way is incorrect: you will every time create a line div which is a bad way, I'll fix my code.
you can easyly create dom elements on hover as long as you remove them on mouseout.
No its not bad.. its a fine solution, there is no problem with creating and removing dom elements. Thats what javascript is for.. dom manipulation.
It's a bad way when you don't need to. Just my two cents.
|
0

Your "hover out" handler removes the class from $(this) -- not from the appended child.

It's probably bad practice to dynamically create elements on hover, that are never deleted & will presumably gradually fill the document with garbage.

Improve this answer

Comments

0

if you only want to add the line to the clone add the start property to the draggable options like this:

$( ".draggable" ).draggable({
  revert: 'invalid', 
  helper:"clone",
  snap: "#drop_here td", 
  opacity: 0.7,
  start: function(event, ui){
    var clone = $(ui.helper);
    if (clone.children('div.line').length == 0)
        clone.append("<div class='line'></div>");
  }
});

Tested this and it works like a charm.. Dont forget to remove this part:

    $(".draggable").hover(function() {
         $(this).append("<div class='line'></div>");
    }, function() {
         $(this).removeClass("line");
    });
Improve this answer

6 Comments

Ok well it is here.. I saved it as template now.. or what else should i do? I'm not realy known to jsbin..
just go on BINS and then CLONE and after that copy the link nad paste here
I dont know.. the element is there.. and only in the clone.. pls mark as answer.. something might be wrong with your css.. or maybe try to put '&nbsp;' (non breaking space) in the div
ok ok, I will mark the answer but please send me if you can this code on email: [email protected] ...
go on BINS / DOWNLOAD and send to email [email protected]
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.