dragend_mouseover_test

_.md

[ Launch: test ] 9ab0b3b6f6f595eb5b57 by delenamalan
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"dragend_mouseover_test","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

inlet.js

var svg = d3.select("svg");

var drag = d3.behavior.drag()
.on("dragstart", function() {
  console.log("dragstart");
})
.on("drag", function() {
  console.log("drag");
  d3.select(this)
   .attr("cx", d3.event.x)
   .attr("cy", d3.event.y);
  d3.select(this).style("fill", "red");
})
.on("dragend", function() {
  console.log("dragend");
  d3.select(this)
    .attr("cx", 200)
    .attr("cy", 200);
  
  d3.select(this).style("fill", "#3BA360");
  // See if manually triggering "mousemove" would work.
  // d3.select(document).on("mousemove")();
}); 

svg.append("circle")
.attr({
  r: 100,
  cx: 200,
  cy: 200,
  fill: "#3BA360"
})
.style("stroke-width", 3)
.on("mouseover", function () {
  console.log("mouseover");
  d3.select(this).style("stroke", "#000");
})
.on("mousemove", function () {
  console.log("mousemove");
})
.on("mouseout", function () {
  console.log("mouseout");
  d3.select(this).style("stroke", "none");
})
.call(drag)
;

d3.select(document).on("mousemove", function() {
  // console.log("mousemove");                                     
});